外邊距margin的合併問題

2022-08-23 02:51:13 字數 615 閱讀 1950

在css中,兩個相鄰的盒子會存在「外邊距margin合併」的現象:

1.margin合併的前提

① 外邊距合併只出現在兩個緊緊相鄰的盒子(父子關係或兄弟關係),如果兩個盒子間存在border或padding則無法合併;

② 外邊距合併只發生在普通文件流中垂直方向上相鄰的塊級元素,而水平方向上的兩個相鄰的盒子則不會發生外邊距合併。

2.兩個盒子外邊距合併後的實際邊距:

① 兩個盒子的margin均為正值,外邊距合併後的實際邊距為二者中較大的值

② 兩個盒子的margin均為負值,外邊距合併後實際邊距為二者中較小的值

③ 兩個盒子的margin乙個為正值、乙個為負值,外邊距合併後實際邊距為二者之和。

為了避免在使用盒子的外邊距margin時出現合併現象,可以使用內邊距padding代替(padding不存在合併現象)。

margin 外邊距合併問題

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

margin外邊距合併問題

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

margin 外邊距合併問題

一 兄弟元素的外邊距合併 效果圖如下 二者之間的間距為100px,不是150px 二 巢狀元素的外邊距合併 對於兩個巢狀關係的元素,如果父元素中沒有內容或者內容在子元素的後面並且沒有上內邊距及邊框,則父元素的上邊距會與子元素的上外邊距發生合併,且值為最大的那個上外邊距,同時該值作為父元素的上外邊距。...