margin 外邊距合併問題

2022-07-08 19:30:14 字數 462 閱讀 4041

一、兄弟元素的外邊距合併

效果圖如下:(二者之間的間距為100px,不是150px)

二、巢狀元素的外邊距合併

對於兩個巢狀關係的元素,如果父元素中沒有內容或者內容在子元素的後面並且沒有上內邊距及邊框,則父元素的上邊距會與子元素的上外邊距發生合併,且值為最大的那個上外邊距,同時該值作為父元素的上外邊距。即使父元素的上外邊距為0,也會發生合併。(只有垂直方向才會發生塌陷)

解決方法:

1. 為父元素定義1畫素的上邊框。

2. 為父元素定義1畫素的上內邊距。

3. 為父元素新增overflow:hidden;

注意,第一種和第二種方法都不好,會撐大盒子的體積。第三種方法將溢位內容隱藏,既不增大盒子體積,也不影響內容。

margin 外邊距合併問題

外邊距合併指的是,當兩個垂直外邊距相遇時,它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。外邊距合併 疊加 是乙個相當簡單的概念。但是,在實踐中對網頁進行布局時,它會造成許多混淆。簡單地說,外邊距合併指的是,當兩個垂直外邊距相遇時,它們將形成乙個外邊距。合併後的外...

margin外邊距合併問題

margin屬性 所有瀏覽器都支援 margin 屬性。這個簡寫屬性設定乙個元素所有外邊距的寬度,或者設定各邊上外邊距的寬度,也可以分別設定個邊的外邊距。margin是乙個復合屬性,包括 margin top margin bottom margin left margin right 基本使用 例...

margin外邊距合併

之前遇到了乙個問題 title 無標題文件 styletype text css body div body div 這是外邊距合併造成的問題。外邊距合併指的是,當兩個垂直外邊距相遇時,它們將形成乙個外邊。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。body和div的上外邊距合併了...