正文

margin 碰到过的重叠问题

IP云
IP云V管理员/0 阅读
08/16
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

双倍margin

稍微记录一下，因为常忘

float + margin，实际边距会变成设置值的双倍。

解决办法是 将元素设为 display:inline

最好要了解 IE的 haslayout 问题

垂直方向的margin重叠

以前一直知道 相邻的两个块元素 在垂直方向margin重叠问题。

但是没有考虑过 父元素和 第一个子元素的重叠情况

代码如下：

<div class="wrap">
<div class="one">margin 20px</div>
<div class="two">margin 20px</div>
</div> <div class="wrap2">margin-top 50px 测试跟wrap的距离</div>

.wrap {
margin:;
background-color: lightcoral; .one {
margin: 20px;
background-color: lightblue;
} .two {
margin: 20px;
background-color: lightgreen;
}
} .wrap2 {
margin-top:50px;
background-color:lightgoldenrodyellow;
height:200px;
}

如果 wrap 包含块没有设置padding或border的话，wrap块的外边距会跟子元素重叠。

添加了border的效果如下。