HTML5開發-子元素設置margin影響父元素

這個問題發生的原因是根據規范,一個盒子如果沒有上補白(padding-top),那么這個盒子的上邊距會和其內部文檔流中的第一個子元素的上邊距重疊。

再說了白點就是:父元素的第一個子元素的上邊距margin-top如果碰不到有效的padding.就會不斷一層一層的找自己 “領導”(父元素,祖先元素)的麻煩。只要給領導設置個有效的padding就可以有效的管制這個目無領導的margin防止它越級,假傳圣旨,把自己的margin當領導的margin執行。 對于垂直外邊距合并的解決方案上面已經解釋了,為父元素例子中的middle元素增加一個padding-top或者最上方的子元素使用padding代替margin即可解決這個問題。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,786評論 1 92
  • 問題 我碰到的問題如下,body 的 margin 為 0px,height 為 100%,但是它不在頁面頂端,導...
    筍齋閱讀 989評論 1 0
  • 在css中margin和padding經常一起使用,多數情況下他們實現相同的效果。在一個塊級元素中,margin指...
    tanyp閱讀 920評論 0 1
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表,主要用...
    寥寥十一閱讀 1,865評論 0 6
  • 盒模型 CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框和外邊距的方式。 ps:如果...
    櫻速閱讀 1,265評論 0 2