Home  >  HTML/CSS

CSS Box Model: Padding, Border, Margin

Setelah mempelajari Selector Lanjutan dan Spesifisitas CSS, kini kita akan membahas konsep fundamental dalam CSS yang mengatur tata letak elemen: Box Model.

Setiap elemen HTML dianggap sebagai sebuah “kotak” (box) yang terdiri dari beberapa lapisan: content, padding, border, dan margin. Memahami Box Model sangat penting untuk mengatur spacing, ukuran, dan tata letak elemen dengan tepat.

1. Komponen Box Model

Box Model terdiri dari:

  1. Content: Area utama yang menampilkan teks, gambar, atau elemen lainnya.
  2. Padding: Ruang transparan di sekitar content, berada di dalam border.
  3. Border: Garis pembatas yang mengelilingi padding dan content.
  4. Margin: Ruang transparan di luar border, memisahkan elemen dari elemen lain.

2. Padding

Padding adalah jarak antara content dan border. Berguna untuk memberikan ruang di dalam elemen.

Contoh Penggunaan Padding

.box {
  padding: 20px; /* semua sisi */
  padding: 10px 20px; /* top-bottom | left-right */
  padding: 5px 10px 15px 20px; /* top | right | bottom | left */
}

Properti Padding Individual

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

3. Border

Border adalah garis yang mengelilingi padding dan content. Kita bisa mengatur style, width, dan color.

Contoh Penggunaan Border

.box {
  border: 2px solid #333; /* width | style | color */
  border-radius: 8px; /* membuat sudut melengkung */
}

Properti Border Lainnya

  • border-style: dotted, dashed, double, groove, dll.
  • border-width: mengatur ketebalan.
  • border-color: mengatur warna.

4. Margin

Margin adalah jarak di luar border, memisahkan elemen dari elemen lain.

Contoh Penggunaan Margin

.box {
  margin: 10px; /* semua sisi */
  margin: 0 auto; /* center horizontal */
  margin: 5px 10px 15px 20px; /* top | right | bottom | left */
}

Properti Margin Individual

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

5. Box-Sizing: Mengontrol Ukuran Total Elemen

Secara default, width dan height hanya mengatur ukuran content, sehingga jika ditambah padding/border, elemen akan melebar.

Untuk menghitung width dan height termasuk padding dan border, gunakan:

.box {
  box-sizing: border-box; /* width & height termasuk padding & border */
}

6. Contoh Penerapan Box Model

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 100px;
      padding: 20px;
      border: 3px solid #3498db;
      margin: 15px;
      background: #f1c40f;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="box">Ini adalah contoh Box Model</div>
</body>
</html>

Kesimpulan

  • Padding: Ruang di dalam elemen (antara content dan border).
  • Border: Garis pembatas di sekitar padding dan content.
  • Margin: Ruang di luar border, memisahkan elemen.
  • box-sizing: border-box memudahkan perhitungan ukuran elemen.

Dengan memahami Box Model, Anda dapat mengatur tata letak dengan lebih presisi. Pada artikel selanjutnya, kita akan membahas Flexbox untuk layout yang lebih responsif!

Categories:HTML/CSS

Tags:

Related Posts