<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边距重叠</title>
<style>
a {
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
.bai {
margin-right: 50px;
}
.gu {
margin-left: 50px;
}
div {
width: 100px;
height: 100px;
/*border: 1px solid green;*/
}
.box1 {
margin-bottom: 50px;
background-color: blue;
}
.box2 {
margin-top: 100px;
background-color: red;
float: left;
}
/*
margin外边距 标签 与 标签之间的距离.
外边距的合并现象, 又叫塌陷现象或者外边距重叠，合并 塌陷 是一个东西。
默认布局的垂直方向上, 默认情况下外边距是不会叠加的, 而是会有合并现象，
以单个外边距的最大值呈现效果
- 如果相等，则仅为其中一个
- 两个都是正数，取最大的
- 两个都是负数，取绝对值最大的
- 一正一负, 取两者之和
注意:
1.外边距的部分没有背景色 边框也不包含这一部分;
2.只会发生在垂直方向, 只有块级元素会产生外边距重叠
3.如果要用外边距, 尽量多使用margin-top, 少使用 margin-bottom
4.兄弟元素之间调整距离margin，父子元素之间调整距离用padding
5.有设定float 和 position=absolute 定位元素不会产生外边距重叠现象
*/
</style>
</head>
<body>
<a href="" class="bai">百度</a>
<a href="" class="gu">谷歌</a>
<!-- 解决相邻兄弟元素间边距重叠问题: 给后一个元素加上浮动 -->
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>上述运行结果：
1144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
