html之margin 重疊現象
阿新 • • 發佈：2019-01-08
兩個普通的div在都設定了margin之後，它們之間的距離不會疊加。只會是兩者中邊距最大那個數值，如下：
<style>
#father{width:300px;
height:300px;
margin-right:50px;
background:#3F6;
}
#child1{
height:100px;
margin-bottom:50px;
background-color:#666;
}
#child2{
height:100px;
margin-top:50px;
background-color:#F3C;
}
</style>
</head>
<body>
<div id="father">
<div id="child1"></div>
<div id="child2"></div>
</div>
</body>
</html>
效果程式碼圖：
但是如果這兩個div是浮動的那麼他們的margin就會是相加的。
這裡說說div裡的寬和高，當把某個div設定了寬和高度之後，這個寬和高度指的的其內容不包括border, padding,margin的。但是當設定了div的背景之後這個背景的區域是包括padding的部分。
<div style="width:300px;height:300px;margin-top:50px; border:20px solid #000; padding:20px; background-color:#0F0">
是這個div
</div>
這個div的效果圖如下：div的世界高度是設定的高度加上border加上Padding的值之後的。
