Box Model dalam CSS
Box model adalah istilah tentang mendesain dan layout. Box model terdiri dari margin, border, margin, content. Berikut adalah ilustrasinya
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>
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
Programmer python yang punya banyak ambisi.
Remote developer at remoteworker.id Software Agency