探讨margin-top的bug

最新推荐文章于 2024-09-05 15:37:22 发布

原创最新推荐文章于 2024-09-05 15:37:22 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#margin #bug

bug 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了CSS中一个常见的布局问题——子元素的顶部外边距（margin-top）被应用到父元素上，而非子元素自身。通过示例代码详细解释了这一现象，并提供了三种解决方案：添加边框、使用浮动及添加顶部填充。

探讨margin-top的bug

当两个容器嵌套时，如果外层容器和内层容器之间没有别的元素，那么作用于内层元素的margin-top会作用于外层容器。

首先我们来看下代码和效果图：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <title>margin-top</title>
  <style>
	div{
		width:150px;
		height:150px;

	}
	.d1{
		background-color:red;
	}
	.d2{
		background-color:yellow;
		margin-top:20px;
	}
	.d3{
		width:100px;
		height:100px;
		background-color:blue;
	}
  </style>
 </head>
 <body>
  <div class="d1"></div>
  <div class="d2">
	<div class="d3">
	</div>
  </div>
 </body>
</html>

当我们给d3添加margin-top:50px时发现：

.d3{
		width:100px;
		height:100px;
		background-color:blue;
		margin-top:50px;
	}

由效果图可看出蓝色区域并没有与黄色区域产生50px的间距，而是作用于外层容器了

那么遇到这种问题，我们能怎么解决呢？

方法一、给外层容器加外框，颜色可设置为原背景色。

.d2{
		background-color:yellow;
		margin-top:20px;
		border:1px solid yellow; 
	}

方法二、让内层容器浮动起来，也可实现效果。

.d3{
		width:100px;
		height:100px;
		background-color:blue;
		margin-top:50px;
		float:left;
	}

方法三、在外层容器里加padding-top:50px;效果可实现，但会改变外框高度，需重新计算高度（所以不推荐这种方法）。

.d2{
		background-color:yellow;
		margin-top:20px;
		padding-top:50px;
	}