子元素margin-top使得父元素下移


一、為什么會出現這種情況

規范這樣說,我也沒辦法……

   1、所有毗鄰的兩個或更多盒元素的margin將會合並為一個margin共享之。
毗鄰的定義為:同級或者嵌套的盒元素,並且它們之間沒有非空內容、Padding或Border分隔。
   2、一個盒子如果沒有上補白(padding-top)和上邊框(border-top),
那么這個盒子的上邊距會和其內部文檔流中的第一個子元素的上邊距重疊。

   3、父元素的第一個子元素的上邊距margin-top如果碰不到有效的border或者padding.

就會不斷一層一層的找自己“領導”(父元素,祖先元素)的麻煩。

二、出現這種情況的解決方案  

    1、在父級中加入一個空的div放在第一個兒子節點上

    2、父級進行設置padding-top:1px,border-top:1px,來轄制第一個子節點

    3、父級設置overflow:hidden屬性(超出的部分被隱藏起來了,這就是所謂的溢出隱藏屬性)


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com