關於margin外邊距合併的問題

2022-07-05 09:48:10 字數 1258 閱讀 4336

一 、兄弟元素margin外邊距合併演示

當兩個垂直方向相鄰的兄弟元素都為常規流塊盒,他們之間垂直方向的外邊距不是兩者之和,而是取兩者中的最大值。這種現象被稱為相鄰的兄弟元素垂直方向外邊距合併。

**演示 :

效果演示 :

二 、父子級元素margin外邊距合併演示及解決方法

對於兩個巢狀的父子級元素,如果父元素沒有設定上外邊距(或者小於子元素的上外邊距),而子元素有上外邊距,就會發生父元素與子元素的上外邊距合併,合併後的外邊距為兩者中較大值。

**演示: 

注 意:父元素article並未設定上外邊距 。

效果演示:

此時我們可以看到,由於子元素設定的上外邊距,子元素已經將父元素一起拖著往下走。並不是我們所想的,子元素的上外邊距離父元素的上外邊距50px。

解決父子級元素外邊距合併的方法:

**演示:

效果演示:

方法二、設定父元素的border屬性  如:border-top: 1px solid transparent; 

**演示:

效果演示:

此方法雖然可以解決父子級外邊距合併,卻會造成一點點影響,會使父級的高度增加1畫素,從而影響頁面效果。 所以推薦使用方法一 。

margin外邊距合併

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

外邊距margin 合併

這是個基礎的問題,我們在普通文字流中布局時常常發生外邊距合併的情況 有時不太注意就會造成頁面的怪異表現,因此要掌握外邊距margin疊加合併的知識點 外邊距合併指的是 當兩個垂直的外邊距相遇時,它們將形成乙個外邊距 合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者 當乙個元素出現在另乙個...

margin 外邊距合併問題

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