CSS 外邊距合并
外邊距合并(疊加)是一個相當(dāng)簡單的概念。但是,在實(shí)踐中對網(wǎng)頁進(jìn)行布局時,外邊距合并會造成許多混淆。
簡單地說,外邊距合并指的是兩個垂直外邊距相遇,并形成一個外邊距。合并后的外邊距的高度等 于兩個發(fā)生合并的外邊距中較大者的髙度。
當(dāng)一個元素出現(xiàn)在另一個元素上面時,第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并。
當(dāng)一個元素包含在另一個元素中時(假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開),它們的上或下外邊距也會發(fā)生合并。
【例題】外邊距合并
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container{
width: 500px;
height: 500px;
margin:50px;
background: #ccc;
}
.content{
width: 200px;
height: 200px;
margin:30px;
background: red;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>
點(diǎn)擊加載更多評論>>