CSS的margin塌陷（collapse）

時間 2019-11-11

標籤 css margin collapse 欄目 CSS 简体版

原文原文鏈接

<!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">

 <html>

 <head>

  <title></title>

 <metaname=""content="">

 <style>

*{

    margin:0px;

    padding:0px;

 #no1{

   background:#808000;

    width:300px;

   height:300px;

   margin:100px 0 0 100px;

 #no2{

   background:#c0c0c0;

   width:150px;

  height:150px;

   margin-left:20px;

   margin-top:30px;

 </style>

 </head>

 <body>

 <div id="no1">

 <div id="no2">Span2</div>

 </div>

</body>

</html>

若是您認爲應該是這樣的話：html

那就錯了。結果是這樣的：瀏覽器

由於CSS中存在一個margin collapse，即邊界塌陷或者說邊界重疊。對於app

上下兩個並列的div塊而言，上面div的margin-bottom和下面div的margin-佈局

top會塌陷，也就是會取上下二者margin裏最大值做爲顯示值，因此從這個spa

意義上說：CSS及瀏覽器的設計者們但願咱們在佈局時，若是遇到上下兩個設計

並排內容塊的安排，最好只設置其中每一個塊上或下margin的一處便可。w3scode

chool也規定：當兩個垂直外邊距相遇時，它們將造成一個外邊距。合併後htm

的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。ip

但對於父塊DIV內含子塊DIV的狀況，就會按另外一條CSS慣例來解釋了，那get

就是：對於有塊級子元素的元素計算高度的方式,若是元素沒有垂直邊框和填

充,那其高度就是其子元素頂部和底部邊框邊緣之間的距離。因此對於代碼：

   1: <div class="father"></div>

father這個div的高度爲0，由於裏面沒有可以撐開div的內容。若是變爲：

   1: <div class="father">I am here.</div>

則高度就是文字的高度，由於此時文字在撐着這個DIV。

話說回來，一個DIV和它的子DIV特別重視垂直邊框或填充，也就好像是，

一口鍋，裏面放個盆，能不能扣住裏面的盆，主要看鍋蓋了，垂直邊框或填

充就是這個「鍋蓋」。因而解決的方式至少有如下三種：

一、須要給父div設置邊框，固然能夠設置邊框爲透明：

   1: border:1px solid transparent

   2: 或

   3: border-top:1px solid transparent

二、爲父DIV添加padding，或者至少添加padding-top;

   1: padding:1px

   2: 或

   3: padding-top:1px;   /*必須大於0*/

三、爲父DIV添加overflow:hidden

   1: over-flow:hidden;

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。