子元素設置margin-top為什么影響了父元素

jeyhan 發布于2019-08-30 10:58 / 2613人閱讀

摘要：兩個，子元素設置了后，發現并沒有跟想象的一樣，而發現父元素產生了間距。父元素的第一個子元素的上邊距如果碰不到有效的或者就會不斷一層一層的找自己領導父元素，祖先元素的麻煩。父級設置父級設置破壞非空白的折疊條件父級設置




    
       crystal

兩個div，子元素div設置了margin-top后，發現并沒有跟想象的一樣，而發現父元素產生了間距。
如上圖。

原理：margin折疊
在css2.1盒模型仲規定的內容

因為嵌套也屬于毗鄰，所以在樣式表中優先級更高子元素的margin會覆蓋外層父元素定義的margin。

父元素的第一個子元素的上邊距margin-top如果碰不到有效的border或者padding.就會不斷一層一層的找自己 “領導”(父元素，祖先元素)的麻煩。只要給領導設置個有效的 border或者padding就可以有效的管制這個目無領導的margin防止它越級，假傳圣旨，把自己的margin當領導的margin執行。

解決辦法：
1、父元素或者子元素使用浮動或者絕對定位。
2、父級設置overflow:hidden
3、父級設置padding（破壞非空白的折疊條件）
4、父級設置border

云服務器 GPU云服務器子元素個數子元素節點添加子元素html html 子元素溢出

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

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

CSS浮動的特性

摘要：原因是因為沒有預先設置高度，所以高度由其包含的子元素高度決定。而浮動脫離文檔流，所以子元素并不會被計算高度。此時的中，相當于中子元素高度為，所以發生了父元素高度塌陷現象。因為凡是能創建一個，就能達到包裹浮動子元素的效果。浮動具有以下特性：蓋不住的文本浮動元素后面不是塊級元素，后面的元素將會和它并排（除非設置了元素的寬度，并且屏幕放不下時將會換行）浮動元素的上一個元素如果沒有浮...

yuxue 2019-08-29 15:33 評論0 收藏0
CSS浮動的特性

摘要：原因是因為沒有預先設置高度，所以高度由其包含的子元素高度決定。而浮動脫離文檔流，所以子元素并不會被計算高度。此時的中，相當于中子元素高度為，所以發生了父元素高度塌陷現象。因為凡是能創建一個，就能達到包裹浮動子元素的效果。浮動具有以下特性：蓋不住的文本浮動元素后面不是塊級元素，后面的元素將會和它并排（除非設置了元素的寬度，并且屏幕放不下時將會換行）浮動元素的上一個元素如果沒有浮...

kamushin233 2019-08-26 11:57 評論0 收藏0
前端必懂之熟悉又陌生的BFC

寫在最前：BFC看起來是個很陌生的概念但它卻時時發生在我們工作中，如何清除浮動影響？如何避免margin穿透問題？如何編寫兩欄自適應布局？都和BFC有這密不可分的關系，下面走進切圖妞的世界，分分鐘搞定BFC！一、什么是BFC？ BFC概念塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素...

Dongjie_Liu 2019-08-02 16:10 評論0 收藏0
前端必懂之熟悉又陌生的BFC

寫在最前：BFC看起來是個很陌生的概念但它卻時時發生在我們工作中，如何清除浮動影響？如何避免margin穿透問題？如何編寫兩欄自適應布局？都和BFC有這密不可分的關系，下面走進切圖妞的世界，分分鐘搞定BFC！一、什么是BFC？ BFC概念塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素...

philadelphia 2019-08-30 15:43 評論0 收藏0