CSS 外邊距合并

提問(wèn)人：劉團(tuán)圓發(fā)布時(shí)間：2020-11-18

外邊距合并（疊加）是一個(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>

<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>

</body>

</html>

相關(guān)視頻回答

回復(fù)(0)