CSS Box Model

CSS Box Model adalah konsep penting dalam desain web yang menjelaskan bagaimana elemen HTML dihitung dan ditata di halaman web. Setiap elemen HTML terdiri dari beberapa bagian: konten, padding, border, dan margin. Ini menciptakan "kotak" untuk setiap elemen.

1. Struktur Box Model

Box model terdiri dari empat bagian utama:

1. Konten (Content): Tempat teks dan elemen lain berada.
2. Padding: Ruang di sekitar konten, di dalam border.
3. Border: Garis yang mengelilingi padding (jika ada).
4. Margin: Ruang di luar border, yang memisahkan elemen dari elemen lain.

div {
  width: 300px;
  height: 150px;
  padding: 20px;
  border: 5px solid #4CAF50;
  margin: 15px;
  background-color: #f0f0f0;
}

2. Menyesuaikan Box Model dengan box-sizing

Secara default, lebar dan tinggi elemen hanya mengukur konten, bukan padding dan border. Anda bisa menggunakan properti box-sizing untuk mengubah cara perhitungan ukuran elemen.

• content-box (default): Lebar dan tinggi dihitung hanya untuk konten.
• border-box: Lebar dan tinggi dihitung termasuk padding dan border.

div.content-box {
  box-sizing: content-box;
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid #4CAF50;
}
 
div.border-box {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid #FF5722;
}

3. Menggunakan Margin dan Padding

• Margin digunakan untuk memberikan jarak antara elemen dan elemen lain.
• Padding digunakan untuk memberi ruang antara konten dan batas elemen.

Margin

div {
  margin-top: 30px;
  margin-right: 50px;
  margin-bottom: 30px;
  margin-left: 50px;
  background-color: #673ab7;
}

Padding

div {
  padding: 20px;
  background-color: #00bcd4;
}

4. Properti Box Model dalam Praktik

Berikut adalah tabel yang menjelaskan properti box model yang digunakan dalam CSS:

5. Menghindari Overlap dengan Box Model

Ketika menggunakan margin dan padding, Anda bisa mengalami masalah dengan elemen yang saling tumpang tindih. Salah satu solusi adalah menggunakan properti box-sizing dengan nilai border-box, yang memastikan padding dan border dimasukkan dalam ukuran elemen.