Spear — Learn to Code

Docs/CSS/Box Model

CSS Box Model

Setiap elemen HTML adalah "box" yang terdiri dari:

Content — area konten
Padding — ruang antara content dan border
Border — garis tepi
Margin — ruang luar border

Gunakan box-sizing: border-box agar width/height termasuk padding dan border.

style.css

.box-demo {
  background: #EEF2FF;
  border: 3px solid #6366F1;
  padding: 20px;
  margin: 16px;
  border-radius: 8px;
}
.box-sizing-demo {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 3px solid #6DD5C4;
  background: #F0FDFA;
  border-radius: 8px;
  margin: 16px 0;
}

← Previous

Colors & Backgrounds

Typography