Belajar CSS (11. Box Model)

Akhi Syabab

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