CSS/HTML外边距的叠加问题
2017-10-29 17:13
183 查看
外边距的叠加有3种情况：
在讨论外边距的叠加之前需要先声明：只有普通文档流中块元素的垂直外边距才会发生外边距叠加，涉及行内框，浮动框，绝对定位框的情况下外边距不会叠加。
1.当两个以及两个以上元素处于相对上下位置（且）时，上面元素的下外边距和下面元素的上外边距会发生叠加，最终的显示结果为两个外边距中较大的一个，如果相等则合为一个显示。（即使加了内边距和边框也不能阻止叠加）。
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距叠加问题</title>
<style type="text/css">
*{ padding: 0; margin: 0; }
.top{
background-color: pink;
margin-bottom: 50px;
}
.bottom{
background-color: blue;
margin-top: 50px;
}
</style>
</head>
<body>
<p class="top">the top</p>
<p class="bottom">the bottom</p>
</body>
</html>
2.一个包含在另一个元素内的元素，如果外部元素没有内边距或有边框将内容区与外边距分隔开， 那么内部元素的外边距和外部元素的外边距发生叠加，最终表现为两者中较大的一个做为实际外边距（例如只设置了上外边距的内部元素的顶部只能和外部元素的上边缘紧邻着，内部元素的外边距体现在外部元素与他们整体之外的元素的上外边距）， 这是一种很奇怪的一个效果，但是如果给外部元素加上边框或者内边距（注意是外部元素），就不会有叠加情况了。
测试代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距叠加问题</title>
<style type="text/css">
*{ padding: 0; margin: 0; }
.outer{
width: 300px;
height: 300px;
background-color: pink;
}
.inner{
width: 100px;
height: 100px;
margin-top: 50px;
background-color:red;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
3.空元素的叠加：对于一个空元素如果设置了上外边距和下外边距那么他们就会发生叠加，结果为两者中值较大的一个外边距，若相等则合并为一个，如果再遇到其他外边距会继续叠加。
测试代码：结果在浏览器的开发者查看器里找到该空元素查看其实际外边距大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距叠加问题</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.void{
margin-top: 50px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<p class="void"></p>
</body>
</html>
——————————————
来自初学者的总结/记录，若有不对，还望指教
在讨论外边距的叠加之前需要先声明：只有普通文档流中块元素的垂直外边距才会发生外边距叠加，涉及行内框，浮动框，绝对定位框的情况下外边距不会叠加。
1.当两个以及两个以上元素处于相对上下位置（且）时，上面元素的下外边距和下面元素的上外边距会发生叠加，最终的显示结果为两个外边距中较大的一个，如果相等则合为一个显示。（即使加了内边距和边框也不能阻止叠加）。
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距叠加问题</title>
<style type="text/css">
*{ padding: 0; margin: 0; }
.top{
background-color: pink;
margin-bottom: 50px;
}
.bottom{
background-color: blue;
margin-top: 50px;
}
</style>
</head>
<body>
<p class="top">the top</p>
<p class="bottom">the bottom</p>
</body>
</html>
2.一个包含在另一个元素内的元素，如果外部元素没有内边距或有边框将内容区与外边距分隔开， 那么内部元素的外边距和外部元素的外边距发生叠加，最终表现为两者中较大的一个做为实际外边距（例如只设置了上外边距的内部元素的顶部只能和外部元素的上边缘紧邻着，内部元素的外边距体现在外部元素与他们整体之外的元素的上外边距）， 这是一种很奇怪的一个效果，但是如果给外部元素加上边框或者内边距（注意是外部元素），就不会有叠加情况了。
测试代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距叠加问题</title>
<style type="text/css">
*{ padding: 0; margin: 0; }
.outer{
width: 300px;
height: 300px;
background-color: pink;
}
.inner{
width: 100px;
height: 100px;
margin-top: 50px;
background-color:red;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
3.空元素的叠加：对于一个空元素如果设置了上外边距和下外边距那么他们就会发生叠加，结果为两者中值较大的一个外边距，若相等则合并为一个，如果再遇到其他外边距会继续叠加。
测试代码：结果在浏览器的开发者查看器里找到该空元素查看其实际外边距大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距叠加问题</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.void{
margin-top: 50px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<p class="void"></p>
</body>
</html>
——————————————
来自初学者的总结/记录，若有不对，还望指教
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 