子元素上的margin作用到了父元素上

2021-08-01 02:37:10 字數 504 閱讀 3061

margin外邊距合併詳解:

以上**的初衷是讓子元素的頂部距離父元素30px,但是事實上卻並沒有實現預 期的效果,而是子元素頂部緊貼父元素,並且margin-top好像轉移給了父元素,讓父元素產生上外邊距。這其實是乙個典型的外邊距合併問題,但是並非 所有的瀏覽器都會產生這種情況,一般標準瀏覽器都會出現此現象,而ie6和ie7在此狀態下不會出現外邊距合併現象。上外邊距合併出現的條件:

1.父元素的上邊距與子元素的上邊距之間沒有border。

2.父元素的上邊距與子元素的上邊距之間沒有非空內容。

3.父元素的上邊距與子元素的上邊距之間沒有padding。

3.父元素和子元素中沒有設定定位屬性(除static和relative)、overflow(除visible)和display:inline-block等。

4.父元素或者資源都沒有浮動。

注意:以上條件必須都要滿足才可以。那麼解決此中情況的方式也很簡單,只要破壞上面的一種情況就可以了。

子元素的垂直margin值對父元素的影響

首先得說一下 margin摺疊 所謂margin摺疊,即相鄰的不同margin值有可能會被摺疊成同乙個margin值。看清楚哦,只是有可能會。至於哪些是相鄰元素?哪些又會存在摺疊?這個鏈結裡闡述很全面。這裡只分析子元素的垂直margin值對父元素的影響 html結構 灰色父塊,紅色子塊,綠色子塊,白...

子元素的margin影響到父元素的大小

總體來講,這個問題是垂直外邊距合併問題。也就是乙個div,作為乙個元素的第乙個子集元素情況下,在設定了外邊距之後,會與父級的div元素在某種情況下進行合併,那麼在什麼情況下呢 第乙個元素的上外邊距會去查詢父級的border或者padding,如果沒找到,就會向外找margin,如果找到margin,...

子元素設定margin會影響父元素問題

參考 給子元素設定的margin結果作用在父元素身上,類似於 越級偽命令 問題的解決辦法有三種 1 為父元素設定padding。2 為父元素設定border。3 為父元素設定 overflow hidden 如果子元素不是div,p,h1等塊級標籤,而是a,span等行內標籤的話,則不會出現marg...