Box-Sizing Example

by oktaviardi pratama

HTML

<h1>Contoh Box-Sizing</h1>

  <div class="box content-box">
    Content-box (width: 200px, height: 100px)
  </div>

  <div class="box border-box">
    Border-box (width: 200px, height: 100px)
  </div>

  <p>
    Perhatikan: <br>
    - <strong>content-box</strong> → width & height hanya menghitung konten, padding & border ditambahkan di luar. <br>
    - <strong>border-box</strong> → width & height sudah termasuk padding & border.
  </p>

CSS

.box {
      margin: 20px;
      padding: 20px;
      border: 10px solid black;
      font-family: Arial, sans-serif;
    }

    .content-box {
      width: 200px;
      height: 100px;
      box-sizing: content-box; /* default */
      background-color: lightblue;
    }

    .border-box {
      width: 200px;
      height: 100px;
      box-sizing: border-box;
      background-color: lightgreen;
    }