📛 CSS Box Model

Panduan lengkap CSS Box Model untuk memahami layout dan spacing elemen

📌 Elements

💡 Konsep Fundamental

CSS Box Model menjelaskan cara browser menghitung ukuran elemen: mulai dari content, padding, border, hingga margin.

box-model.css
/* Content area */
.content-box {
  width: 300px;
  height: 200px;
}

/* Padding */
.with-padding {
  padding: 20px;
}

/* Border */
.with-border {
  border: 5px solid #9333ea;
}

/* Margin */
.with-margin {
  margin: 15px;
}

📝 Penjelasan Detail:

â€ĸ Content → area tempat teks/gambar berada
â€ĸ Padding → jarak antara content dan border
â€ĸ Border → garis di sekitar padding & content
â€ĸ Margin → jarak antara elemen dengan elemen lain

🛠ī¸ Features

box-sizing.css
/* Default behavior */
.default-box {
  box-sizing: content-box;
}

/* Include padding & border in size */
.better-box {
  box-sizing: border-box;
}

ℹī¸ Browser Support

box-sizing didukung oleh semua browser modern (Chrome 1+, Firefox 1+, Safari 3+, IE 8+).

📊 Basic Tables

padding-margin.css
/* Padding syntax */
padding: 10px; /* all sides */
padding: 10px 20px; /* top/bottom, left/right */
padding: 10px 15px 20px; /* top, left/right, bottom */
padding: 5px 10px 15px 20px; /* top, right, bottom, left */

/* Margin syntax */
margin: auto; /* center element */
margin: 0; /* no margin */

🚀 Advanced Table

advanced-box.css
/* Outline vs Border */
.with-outline {
  outline: 2px dashed #a855f7;
}

/* Overflow control */
.overflow-box {
  overflow: auto;
}

💡 Pro Tips

đŸŽ¯ Best Practices

Gunakan box-sizing: border-box; untuk layout yang konsisten dan mudah diatur ukurannya.

best-practices.css
/* ✅ Good */
* {
  box-sizing: border-box;
}

/* ❌ Avoid fixed height unless necessary */
.card {
  height: 300px;
}