Div多层嵌套margin-top的bug问题及解决方案

bug:

如果父元素和第一个子元素没有float的情况下，给第一个子元素添加margin-top属性会错误的传递给父元素，出现父元素与子元素一起向下移动的问题。

eg:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>margin-top-bug问题及解决方案</title>

	<style>
		*{
			margin:0;
			padding:0;
		}
		.div1{
			width:800px;
			height:400px;
			background:red;
		}
		.div2{
			width:600px;
			height:300px;
			background:skyblue;
			margin-top:30px;
		}
	</style>
</head>
<body>
	<div class="div1">
		<div class="div2">第一个子元素</div>
	</div>
</body>
</html>

原理：一个盒子如果没有上补白（padding-top）和上边框（border-top），那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

通俗一点来说就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding，就会不断的一层一层的找自己的父元素的麻烦。只要给领导设置个有效的border或者padding就可以有效的管制margin防止他越级，把自己的margin当父元素的margin执行。

解决办法（一）：给子元素添加浮动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>margin-top-bug问题及解决方案</title>

	<style>
		*{
			margin:0;
			padding:0;
		}
		.div1{
			width:800px;
			height:400px;
			background:red;
		}
		.div2{
			width:600px;
			height:300px;
			background:skyblue;
			margin-top:30px;
			float: left;
		}
	</style>
</head>
<body>
	<div class="div1">
		<div class="div2">第一个子元素</div>
	</div>
</body>
</html>

解决方法（二）：给父元素添加绝对定位属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>margin-top-bug问题及解决方案</title>

	<style>
		*{
			margin:0;
			padding:0;
		}
		.div1{
			width:800px;
			height:400px;
			background:red;
			position:absolute;
		}
		.div2{
			width:600px;
			height:300px;
			background:skyblue;
			margin-top:30px;
		}
	</style>
</head>
<body>
	<div class="div1">
		<div class="div2">第一个子元素</div>
	</div>
</body>
</html>

解决方法（三）：给父元素div设置border或者padding

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>margin-top-bug问题及解决方案</title>

	<style>
		*{
			margin:0;
			padding:0;
		}
		.div1{
			width:800px;
			height:400px;
			background:red;
			/*添加border-top*/
			border-top:solid 1px #FFF;
			/*添加padding-top*/
			/*padding-top:1px;*/
		}
		.div2{
			width:600px;
			height:300px;
			background:skyblue;
			margin-top:30px;
		}
	</style>
</head>
<body>
	<div class="div1">
		<div class="div2">第一个子元素</div>
	</div>
</body>
</html>

这样就可以很轻松的解决div嵌套时margin-top错误传递给父元素的问题啦啦啦啦~

后续如果再发现其他方法会继续补充~

Div多层嵌套margin-top的bug问题及解决方案

猜你喜欢