The My Project

Beranda
CSS

CSS | BAB 4 Box Model CSS

 


Apa itu Box Model?

Box Model adalah konsep dalam CSS yang menggambarkan cara elemen HTML diatur dalam kotak yang terdiri dari empat bagian utama: margin, border, padding, dan content.

Properti content, padding, border, dan margin
Content

Content adalah bagian utama dari elemen yang berisi teks, gambar, atau elemen lainnya. Content diatur menggunakan properti CSS seperti width dan height.

Border

Border adalah garis yang mengelilingi content dan padding elemen. Border dapat diatur menggunakan properti CSS seperti border-width, border-style, dan border-color.

Padding

Padding adalah ruang di antara content dan border elemen. Padding digunakan untuk memberikan jarak antara konten elemen dengan border. Padding dapat diatur menggunakan properti CSS seperti padding-top, padding-bottom, padding-left, dan padding-right.

Margin

Margin adalah ruang di sekeliling elemen, yang berfungsi untuk memberikan jarak antara elemen dengan elemen lain di sekitarnya. Margin dapat diatur menggunakan properti CSS seperti margin-top, margin-bottom, margin-left, dan margin-right.


Menggunakan box-sizing

Menggunakan box-sizing adalah properti CSS yang memungkinkan Anda mengontrol bagaimana ukuran elemen dihitung. Nilai defaultnya adalah content-box, yang berarti ukuran elemen hanya mencakup content dan tidak termasuk padding dan border.

Namun, dengan menggunakan box-sizing: border-box, ukuran elemen akan mencakup content, padding, dan border. Ini dapat membantu dalam mengatur tata letak elemen dengan lebih mudah dan konsisten, terutama ketika menggunakan unit ukuran seperti persen atau em. Contohnya adalah sebagai berikut: 

<!DOCTYPE html>
<html>
<head>
<title>Properti text-decoration</title>
<style>
.box {
  display: flex; /* Diperlukan untuk menggunakan align-items */
  align-items: center; /* Rata tengah konten secara vertikal */
  justify-content: center; /* Rata tengah konten secara horizontal (opsional) */
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 1px solid black;
  box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
  Ini adalah konten dalam kotak.
</div>
</body>
</html>

Properti text-decoration
Ini adalah konten dalam kotak.

Dalam contoh di atas, dengan menggunakan box-sizing: border-box, ukuran total elemen .box akan tetap 200px x 200px, termasuk padding dan border. Tanpa pengaturan ini, ukuran total elemen akan menjadi 242px x 242px (200px + 20px + 20px + 1px + 1px).