CSS 外邊距合并

提問人：劉團圓發(fā)布時間：2020-11-18

外邊距合并（疊加）是一個相當簡單的概念。但是，在實踐中對網(wǎng)頁進行布局時，外邊距合并會造成許多混淆。

簡單地說，外邊距合并指的是兩個垂直外邊距相遇，并形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距中較大者的髙度。

當一個元素出現(xiàn)在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并。

當一個元素包含在另一個元素中時（假設沒有內(nèi)邊距或邊框把外邊距分隔開），它們的上或下外邊距也會發(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>

相關視頻回答

回復(0)