CSS外邊距合并問題

來源:互聯網
上載者:User

標籤:怎麼辦   ges   填充   筆記   height   20px   png   ima   它的   

  今天無意中碰到了外邊距合并的問題,於是便研究了一下。這裡做個筆記。

  所謂外邊距合并,指的是當兩個垂直外邊距相遇時,它們將形成一個外邊距。合并後的外邊距的高度等於兩個發生合并的外邊距的高度中的較大者。

  例如,這裡有這樣兩個塊元素: 

<div class="box1"></div><div class="box2"></div>

  這裡給的樣式是: 

.box1{    width:150px;    height:150px;    background:gray;    }.box2{    width:150px;    height:150px;    background:lightblue;}

  先來看一下效果:

  

  意料之中的,然後給.box1一個向下的外邊距20px,結果為:

  

  也沒啥問題,好了,那麼我再給.box2一個向上的外邊距10px,這裡問題就來了。

  

  會發現,這兩個元素間的間距並沒有發生變化,為什麼會這樣呢?這是因為他們發生了外邊距合并,因為第一個塊元素的外邊距大於第二個塊元素的外邊距,二者間的邊距便以第一個塊元素的外邊距為準。

  這裡我再代碼稍微改一下,變成這樣。  

<div class="box1">    <div class="box2"></div></div>

  樣式變為這樣。 

.box1{    width:150px;    height:150px;    background:lightblue;    margin-top:20px;}.box2{    width:100px;    height:100px;    background-color: lightgreen;}

  此時效果相信大家都知道了,可是如果我想讓.box2距離的的父元素有一定的上邊距該怎麼辦呢?也許有人會說很簡單,我直接給它一個上外邊距(margin-top)啊,不好意思,不行,那有人會說那我給它一個上內填充(padding-top)呢?不好意思,還是不行,這麼做只會改變該元素的高度,那麼應該怎麼做呢,其實很簡單,就是給它的父元素一個上內填充(padding-top)就行了,當然這裡它的父元素的總高度會改變,此時你就要根據具體情況來設定它的height了,具體情況具體分析。

 

  總結:

  1、當兩個垂直外邊距相遇時,它們將形成一個外邊距。合并後的外邊距的高度等於兩個發生合并的外邊距的高度中的較大者。

  2、只有普通文檔流中塊框的垂直外邊距才會發生外邊距合并。行內框、浮動框或絕對位置之間的外邊距不會合并。

  3、當一個塊元素中嵌套另一個塊元素,而想讓子塊元素距離它的父元素有一定的上邊距時,可以給它的父元素一個上內填充(padding-top)便可解決。

   

 

CSS外邊距合并問題

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.