Belajar Koding HTML & CSS Bagian 14: Membuat Ukuran Margins Margin
.png)
Margin dalam CSS digunakan untuk
mengatur jarak di sekitar elemen HTML, yaitu ruang antara batas elemen (border)
dengan elemen lainnya. Properti ini sangat penting dalam mengatur tata letak
dan estetika halaman web.
🧱 Cara Menggunakan Margin di CSS
CSS menyediakan beberapa cara untuk
mengatur margin:
- Properti
Spesifik:
Mengatur margin pada sisi tertentu.
margin-top: 10px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;
- Properti
Shorthand:
Mengatur semua sisi sekaligus.
margin: 10px 15px 10px 15px; /* Atas, Kanan, Bawah, Kiri */
margin: 10px 15px;
/* Atas & Bawah, Kanan & Kiri */
margin: 10px;
/* Semua sisi */
- Nilai
Khusus:
- auto: Digunakan untuk memusatkan
elemen secara horizontal.
margin: 0 auto;
- inherit: Mewarisi nilai margin dari
elemen induk.
- Nilai negatif: Menggeser elemen ke arah berlawanan.Badoy Studio+14RevoU+14PT Nextgen Inovasi Indonesia |+14
📌 Contoh Penggunaan Margin
Berikut contoh sederhana penggunaan
margin dalam HTML dan CSS:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color:
lightblue;
margin: 20px;
}
</style>
</head>
<body>
<div class="box">Kotak dengan margin 20px</div>
</body>
</html>
 |
| Tampilan Hasil (Output) Margin Border |
Dalam contoh di atas, elemen <div>
dengan kelas box memiliki margin sebesar 20px di
semua sisinya.
0 Response to "Belajar Koding HTML & CSS Bagian 14: Membuat Ukuran Margins Margin"
Post a Comment