Padding dan Margin

Padding

Padding adalah ruang di sekitar konten elemen HTML. Anda dapat mengontrolnya menggunakan properti CSS padding. Ada beberapa cara untuk menentukan padding:

  1. Padding All Sides:

    .contoh-elemen {
 padding: 10px; /* Sama dengan padding: 10px 10px 10px 10px; */
}

  2. Padding Individual Sides:

    .contoh-elemen {
 padding-top: 10px;
 padding-right: 20px;
 padding-bottom: 10px;
 padding-left: 20px;
}

Margin

Margin adalah ruang di luar elemen HTML. Anda juga dapat mengontrolnya dengan properti CSS margin. Seperti padding, ada beberapa cara untuk menentukan margin:

  1. Margin All Sides:

    .contoh-elemen {
 margin: 10px; /* Sama dengan margin: 10px 10px 10px 10px; */
}

  2. Margin Individual Sides:

    .contoh-elemen {
 margin-top: 10px;
 margin-right: 20px;
 margin-bottom: 10px;
 margin-left: 20px;
}

  3. Auto Margin (untuk pusatkan elemen):

    .contoh-elemen {
 margin: 0 auto; /* Memusatkan elemen horizontal */
}

Anda dapat mengganti angka dalam contoh-contoh di atas dengan nilai yang sesuai dengan desain Anda. Padding dan margin sangat berguna dalam mengendalikan tata letak dan tampilan elemen dalam halaman web Anda.

PREVIOUS
NEXT