外边距重叠问题

父子

父子结构中水平外边距与垂直外边距表现的往往也不同

水平外边距

水平外边距往往规则渲染

html

<div class="wrapper"><div class="inner"></div>
</div>

css

.wrapper{width: 400px;height: 400px;background-color: red;
}
.inner{width: 200px;height: 200px;background-color: black;margin-left: 50px;
}

效果

垂直外边距

垂直外边距会发生重叠问题

html

<div class="wrapper"><div class="inner"></div>
</div>

css

.wrapper{width: 400px;height: 400px;background-color: red;
}
.inner{width: 200px;height: 200px;background-color: black;margin-top: 50px;
}

效果

问题解决

父元素

1. 外层元素padding代替
2. 外层元素 overflow:hidden;

子元素

1. 内层元素透明边框 border:1px solid transparent;
2. 内层元素绝对定位 postion:absolute;
3. 内层元素 加float:left;或display:inline-block;
4. 内层元素padding:1px;

兄弟

兄弟元素与父子元素往往表现的不同

垂直外边距

垂直外边距取最大值

结果取了最大的外边距即20px

水平外边距

水平外边距最终是要相加(这一点与垂直外边距不同)

html

<div class="wrapper"><div class="box1"></div><div class="box2"></div>
</div>

css

.wrapper{display: flex;
}
.box1 {width: 200px;height: 200px;margin-right: 100px;background-color: red;
}/* 取最大外边距 */
.box2 {width: 200px;height: 200px;background-color: green;margin-left: 50px;
}

效果