盒子模型的外邊距塌陷和合并問題及解決方案

morgan 發布于2019-08-29 17:30 / 1292人閱讀

摘要：外邊距塌陷當嵌套的兩個塊元素給子盒子加向上的外邊距時父盒子會跟著掉下來此時就是外邊距塌陷解決方案給父盒子加給父盒子加上邊框給父元素加屬性當同一個效果能用解決就最好不用解決注意盒子在網頁中所占地面積自身寬高內邊距邊框外邊距外邊距合并當垂直排列

外邊距塌陷:

         當嵌套的兩個塊元素,給子盒子加向上的外邊距時,父盒子會跟著掉下來,此時就是外邊距塌陷.
          解決方案:
         1.給父盒子加padding
         2.給父盒子加上邊框
         3.給父元素加overflow:hidden 屬性
         
         當同一個效果能用padding解決就最好不用margin解決

注意：盒子在網頁中所占地面積=自身寬高+內邊距+邊框+外邊距

外邊距合并:
當垂直排列的兩個塊元素,同時給上面的盒子加向下的外邊距,給下面的盒子加向上的外邊距,此時會造成外邊距合并,當數值相同的時候,就是那個值,當值不同的時候,取最大的那個值

云服務器 GPU云服務器 html 的外邊距外邊距重疊 html外邊距上下 html外邊距顏色

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114368.html

HTML、CSS筆記

摘要：相鄰的兄弟元素相鄰的兩個兄弟元素之間的外邊距會塌陷。塊級父元素與其第一個最后一個子元素如果塊級父元素中，上邊框寬度及上內邊距距離為時，此時這個塊級父元素和其第一個子元素就會發生上外邊距合并現象。盒模型在CSS中，使用標準盒模型描述這些矩形盒子中的每一個。這個模型描述了元素所占空間的內容。每個盒子有四個邊：外邊距邊, 邊框邊, 內填充邊與內容邊。在標準模式下，一個塊的總寬度=...

frank_fun 2019-08-01 18:29 評論0 收藏0
HTML、CSS筆記

摘要：相鄰的兄弟元素相鄰的兩個兄弟元素之間的外邊距會塌陷。塊級父元素與其第一個最后一個子元素如果塊級父元素中，上邊框寬度及上內邊距距離為時，此時這個塊級父元素和其第一個子元素就會發生上外邊距合并現象。盒模型在CSS中，使用標準盒模型描述這些矩形盒子中的每一個。這個模型描述了元素所占空間的內容。每個盒子有四個邊：外邊距邊, 邊框邊, 內填充邊與內容邊。在標準模式下，一個塊的總寬度=...

Aomine 2019-08-29 14:22 評論0 收藏0
CSS（三）

摘要：盒子模型示意圖如下把元素叫做盒子，設置對應的樣式分別為盒子的邊框盒子內的內容和邊框之間的間距盒子與盒子之間的間距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。CSS盒子模型盒子模型解釋元素在頁面中顯示成一個方塊，類似一個盒子，CSS盒子模型就是使用現實中盒子來做比喻，幫助我們設置元素對應的樣式。盒子模型示意圖如下：把元素叫做盒子，設置對應的樣式分別為：盒子的邊框(bor...

番茄西紅柿 2019-04-23 13:43 評論0 收藏0
【css】常見問題

摘要：將元素顯示為內聯元素，元素前后沒有換行符。我們知道內聯元素是無法設置寬高的，所以一旦將元素的屬性設為，設置屬性和是沒有用的。這個屬性值融合了和的特性，即是它既是內聯元素，又可以設置和。 CSS 中 inline 元素可以設置 padding 和 margin 嗎？行內元素設置width,height無效。但是設置margin和padding是有效的。行內非替換元素的外邊距不會改變一個...

renweihub 2019-08-29 16:25 評論0 收藏0