Iklan bawah header

Belajar CSS : Margin dan Padding pada CSS

Margin dan padding merupakan property yang paling sering digunakan dalam mendesign sebuah website dengan menggunakan CSS. Karena margin dan padding memiliki fungsi untuk mengatur jarak elemen HTML dari luar dan mengatur jarak elemen HTML dari dalam. Untuk itu pada tutorial kali ini kita akan belajar tentang apa itu margin? dan apa itu padding? dan bagaimana cara penggunaannya pada CSS.

Mengenal Margin pada CSS

Margin berfungsi untuk mengatur jarak antara satu elemen dengan elemen lainnya pada HTML. Anda bisa mengatur sisi luar margin dengan menggunakan beberapa property berikut, mengatur jarak luar bagian atas bisa menggunakan property 'margin-top', untuk bagian bawah menggunakan property 'margin-bottom', untuk bagian kiri bisa menggunakan property 'margin-left dan untuk mengatur sisi luar pada bagian kanan bisa menggunakan property 'margin-right'.

tetapi jika property yang digunakan hanya menggunakan syntax 'margin' saja maka akan secara mengatur sisi luar pada bagian atas, bawah, kiri dan kanan elemen. Untuk lebih jelasnya, berikut adalah contoh penggunaan margin pada css.

index.html


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

style.css


.box {
background: green;
height: 150px;
widht: 250px;
margin: 15px;
}
.box-dua {
background: red;
height: 200px;
width: 300px;
margin-left: 40px;
}
margin

Perhatikan contoh diatas, pada kotak yang kedua kita mengatur margin-left atau margin kiri sebesar 40 pixel. dan pada kotak pertama yang berwarna hijau kita memberikan margin atau jarak luar segala sisi sebesar 15 pixel.

Mengenal Padding pada CSS

Padding merupakan sebutan untuk spasi atau ruang yang ada di dalam tag HTML. Untuk aturan penulisannya sebenarnya hampir sama dengan margin. oke, langsung saja kita mulai.

Berikut contoh penggunaan padding pada CSS

index.html


<!DOCTYPE html>
<head>
<title>Margin CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>www.offaweb.com</h1>
<div class="box">
<h1>BOX 1</h1>
</div>
<div class="box-dua">
<h1>BOX 2</h1>
</div>
</body>
</html>

style.css


.box {
background: green;
height: 150px;
widht: 250px;
padding: 15px;
}
.box-dua {
background: red;
height: 200px;
width: 300px;
padding-left: 40px;
}
padding

Demikian contoh dan penjelasan mengenai margin dan padding, Semoga bermanfaat.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel