Margin dan Padding pada CSS

Margin dan padding merupakan yang paling banyak di gunakan dalam mendesain sebuah
website dengan menggunakan CSS. karena margin dan padding di gunakan untuk mengatur sisi
dalam dari pada sebuah element dan mengatur sisi sebelah luar dari sebuah element. untuk itu
pada tutorial belajar CSS Dasar Margin dan Padding pada CSS ini akan dijelaskan tentang apa
itu margin? apa itu padding? dan bagaimana cara penggunaannya pada CSS.

Mengenal Margin pada CSS
Margin adalah sisi luar dari sebuah element. misalnya anda ingin mengatur jarak antar
element. anda bisa menggunakan syntax margin untuk mengaturnya. terdapat beberapa sisi luar
margin yaitu, margin atas di tuliskan pada css dengan ‘margin-top’, margin bawah atau jarak luar
bagian bawah di tulis di CSS dengan ‘margin-bottom’, ‘margin-left’ sebagai jarak luar sebelah
kiri element, dan ‘margin-right’ adalah sisi luar pada bagian sebelah kanan. tetapi jika andahanya menggunakan syntax ‘margin’ saja maka akan secara otomatis mengatur jarak atas,bawah,kiri dan kanan element.berikut ini adalah contoh penggunaan margin pada CSS.

index.html

<!DOCTYPE html>
<html>
<head>
<title>Margin CSS by bng</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box">
<h1>Ini adalah box 1</h1>
</div>
<div class="box-dua">
<h1>Ini adalah box 2</h1>
</div>
</body>
</html> 

style.css

.box{
    background: blue;
    height: 200px;
    width: 300px;
    margin: 20px;
    }
    .box-dua{
    background: red;
    height: 100px;
    width: 200px;
    margin-left: 70px;
    }

Perhatikan pada contoh di atas. pada kotak dua kita mengatur margin-left atau margin kiri
sebesar 70px atau 70 pixel. dan pada kotak yang berwarna biru kita memberikan margin atau
jarak luar segala sisi sebesar 20px.

Mengenal Padding pada CSS
Padding adalah sisi dalam dari sebuah element. kita bisa menggunakan syntax
padding untuk mengatur jarak pada sisi dalam sebuah element yang kita tentukan. sama
seperti margin yang memiliki sisi-sisi . seperti top, left, right, bottom. jenis padding yaitu
padding atas di tuliskan pada css dengan ‘padding-top’ yang berarti mengatur sisi dalam sebelah
atas sebuah element, pading bawah atau jarak dalam bagian bawah di tulis di CSS dengan
‘padding-bottom’, ‘padding-left’ sebagai jarak dalam sebelah kiri element, dan ‘padding-right’
adalah sisi luar pada bagian sebelah kanan. jika anda hanya menggunakan syntax ‘padding’ saja
maka akan secara otomatis mengatur jarak atas,bawah, kiri dan kanan element yang bagian
dalam. berikut ini adalah Contoh penggunaan padding pada CSS

index.html

<!DOCTYPE html>
<html>
<head>
<title>Padding CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>www.belajarngodingg.my.id</h1>
<div class="box">
<h1>Ini adalah box 1</h1>
</div>

<div class="box-dua">
<h1>Ini adalah box 2</h1>
</div>

</body>
</html>

style.css

h1{
    text-align: center;
    }
    
    .box{
    background: blue;
    height: 200px;
    width: 300px;
    padding: 20px;
    }
    
    .box-dua{
        background: red;
height: 100px;
width: 600px;
padding-left: 70px;
}
 

sekian contoh dan penjelasan tentang margin dan padding pada tutorial belajar css margin dan
padding pada css.

Belajar Coding

Margin dan Padding pada CSS

Posting Komentar