盒子外邊距合併問題

2021-10-01 19:27:46 字數 498 閱讀 2389

兩個div盒子一排

第乙個margin-bottom為正 20px

第二個margin-top 為正 20px

兩個盒子的外邊距會合併 為10px;

也就是說兩個盒子自身的外邊距是盒子自身的一半 負數也是一半值是負數

兩個數值和為零會合拼

安照上面所述 一正一負數值是一樣會鏈結在一起

比如上20px 下面盒子是-20px 是和合併在一起

如果二個盒子是在一排的

margin-right:20px

margin-left:20px

兩個盒子之間的外邊距不會合併

一正一負 數值相加為零會合併 不等於零 會是負數的外邊距的一半

關於盒子外邊距合併

外邊距合併,對於兩個巢狀關係的塊元素,如果父元素沒有上內邊距及邊框,則父元素的上邊距會與子元素的上邊距合併,合併後的外邊距取兩者中的較大者。即使父元素的上外邊距為0,也會發生合併。即為當父盒子裡的子盒子給它乙個margin值時,子盒子的移動會影響父盒子一起移動 這裡當子盒子給了margin top ...

盒子外邊距

margin 10px 乙個值 上下左右 margin 10px 20px 二個值 上下 左右 margin 10px 20px 30px 三個值 上 左 右 下 margin 10px 20px 30px 40px 四個值 上 下 左 右 初始化網頁元素 網頁中所有的元素的內外邊距都為0 盒子水平...

外邊距合併(外邊距塌陷)

使用margin定義塊元素的垂直外邊距時,可能會出現外邊距的合併。當上下相鄰的兩個塊元素相遇時,如果上面的元素有下外邊距margin bottom,下面的元素有上外邊距margin top,則他們之間的垂直間距不是margin bottom與margin top之和,而是兩者中的較大者。這種現象被稱...