CSS 外邊距合并
外邊距合并(疊加)是一個(gè)相當(dāng)簡(jiǎn)單的概念。但是,在實(shí)踐中對(duì)網(wǎng)頁(yè)進(jìn)行布局時(shí),外邊距合并會(huì)造成許多混淆。
簡(jiǎn)單地說(shuō),外邊距合并指的是兩個(gè)垂直外邊距相遇,并形成一個(gè)外邊距。合并后的外邊距的高度等 于兩個(gè)發(fā)生合并的外邊距中較大者的髙度。
當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí),第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并。
當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)(假設(shè)沒(méi)有內(nèi)邊距或邊框把外邊距分隔開(kāi)),它們的上或下外邊距也會(huì)發(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)擊加載更多評(píng)論>>