Padding, Border, Margin

Dalam CSS, padding, border, dan margin adalah properti yang digunakan untuk mengatur tata letak dan tampilan elemen HTML. Mari kita pelajari masing-masing properti secara detail:

Padding

Padding digunakan untuk menentukan ruang antara batas elemen dan kontennya. Syntax untuk padding adalah sebagai berikut:

.selector {
    padding: top right bottom left;
}

Contoh penggunaan padding:

.container {
    padding: 20px; /* padding: atas-kanan-bawah-kiri */
}

Border

Border digunakan untuk menentukan garis sekeliling elemen. Anda dapat mengatur tipe, ketebalan, dan warna garis. Syntax untuk border adalah sebagai berikut:

.selector {
    border: ketebalan tipe warna;
}

Contoh penggunaan border:

.box {
    border: 2px solid #3498db; /* ketebalan tipe warna */
}

Margin

Margin digunakan untuk menentukan ruang di sekitar elemen, antara elemen tersebut dengan elemen-elemen lainnya. Syntax untuk margin adalah sebagai berikut:

.selector {
    margin: top right bottom left;
}

Contoh penggunaan margin:

.item {
    margin: 10px 0; /* margin: atas-bawah kanan-kiri */
}

Dengan menggunakan properti padding, border, dan margin, Anda dapat mengontrol tata letak dan tampilan elemen HTML dengan lebih fleksibel dalam CSS. Semoga tutorial ini membantu Anda memahami konsep dasar dari ketiga properti ini!

PREVIOUS
NEXT