Belajar CSS (11. Box Model)

Box Model dalam CSS

Box model adalah istilah tentang mendesain dan layout. Box model terdiri dari margin, border, margin, content. Berikut adalah ilustrasinya
box

ex.

<!DOCTYPE html>
<html>
  <head>
    <style>
    div {
        width: 320px;
        padding: 10px;
        border: 5px solid gray;
        margin: 0;
    }
    </style>
    </head>
  <body>
    <h2>Menghitung total lebar</h2>
    <img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
    <div>The picture above is 350px wide. The total width of this element is also 350px.</div>
  </body>
</html>

hasil

penghitungan rumusnya yaitu :
320px (lebar)
+ 20px (kiri + kanan padding)
+ 10px (kiri + kanan border)
+ 0px (kiri + kanan margin)
= 350px

Total lebar elemen harus dihitung seperti ini:
Lebar total elemen = lebar + bantalan kiri + kanan + bantalan perbatasan kiri + kanan + perbatasan margin kiri + margin kanan

Tinggi total dari elemen harus dihitung seperti ini:
Tinggi total elemen = tinggi + bantalan atas + bantalan bawah + perbatasan atas + batas bawah + margin atas + margin bawah

Semoga bermanfaat.

Written By @akhi_syabab

Leave a Reply

Your email address will not be published.Required fields are marked *