Di dalam CSS, margin collapsing terjadi jika suatu elemen bersinggungan pada margin-bottom pada elemen yang pertama dan margin-top pada elemen yang lain. Saat margin-collapsing terjadi maka margin yang dihasilkan bukan penambahan margin-bottom dengan margin-top tetapi margin dengan nilai paling besar. Oleh karena itu kita harus hati-hati mendisain suatu layout yang melibatkan margin-collapsing yang merupakan bertemunya margin-bottom suatu elemen dengan margin-top suatu elemen yang lain.
Sebagai contoh perhatikan coding berikut ini:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<style type=”text/css”>
body
{
margin: 0px;
padding: 0px;
}
#atas
{
width: 300px;
height: 200px;
background: yellow;
border: 30px;
border-color: purple;
border-style: solid;
margin-bottom: 30px;
margin-left: 30px;
margin-right: 30px; margin-top: 30px;
}
#bawah
{
width: 300px;
height: 200px;
background: pink;
border: 30px;
border-color: blue;
border-style: solid;
margin-top: 60px;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 30px;
}
</style>
<title>Margin collapsing</title>
</head><body><div id=”atas”>Ini atas</div>
<div id=”bawah”>Ini bawah</div>
</body>
</html>
Hasilnya bisa dilihat pada http://aris.proweb.asia/margin_collapsing.html atau pada gambar di bawah ini
Perhatikan bahwa margin-bawah untuk #atas adalah 30px, sedangkan margin-top untuk #bawah adalah 60px,
setelah #atas dan #bawah bersinggungan marginnya bukan 90px tetapi 60px.
Kunjungi www.proweb.co.id untuk menambah wawasan anda.