Model kotak (box model) dalam CSS adalah konsep yang mendefinisikan 

bagaimana elemen HTML ditampilkan di halaman web, 

dengan memperlakukan setiap elemen sebagai kotak persegi panjang 

yang terdiri dari empat bagian: 

konten, padding, border, dan margin. 

.box-model-example {
  /* Content area */
  width: 200px;
  height: 100px;
  /* Padding */
  padding: 20px;
  /* atau */
  padding: 10px 20px;
  /* vertical horizontal */
  padding: 10px 15px 20px 25px;
  /* top right bottom left */
  /* Border */
  border: 2px solid #333;
  /* atau */
  border-width: 2px;
  border-style: solid;
  border-color: #333;
  /* Margin */
  margin: 10px auto;
  /* center horizontal */
  margin: 10px 0 20px 0;
  /* top right bottom left */
}

Box Sizing

/* Default - content-box */

.content-box {
  box-sizing: content-box;
  width: 200px;
  /* hanya content */
  padding: 20px;
  border: 2px solid #333;
  /* Total width = 200 + 40 + 4 = 244px */
}

/* Border-box (Recommended) */

.border-box {
  box-sizing: border-box;
  width: 200px;
  /* termasuk padding dan border */
  padding: 20px;
  border: 2px solid #333;
  /* Total width = 200px */
}

/* Global reset */

* {
  box-sizing: border-box;
}

Display Property

.display-examples {
  /* Block: mengambil lebar penuh */
  display: block;
  /* Inline: sesuai konten, tidak bisa set width/height */
  display: inline;
  /* Inline-block: gabungan inline dan block */
  display: inline-block;
  /* None: elemen disembunyikan */
  display: none;
  /* Flex: untuk flexbox layout */
  display: flex;
  /* Grid: untuk grid layout */
  display: grid;
}

sasa