margin塌陷及处理

最新推荐文章于 2024-02-04 08:39:10 发布

泠泉石上

最新推荐文章于 2024-02-04 08:39:10 发布

阅读量2.6k

点赞数

分类专栏： HTML和CSS布局中的奇葩问题文章标签：前端

本文链接：https://blog.csdn.net/cyp18408251336/article/details/52346467

版权

4 篇文章 0 订阅

订阅专栏

什么是margin塌陷，margin塌陷是指在使用margin布局时，特定情况下导致margin高度与代码中设计的高度不同。

如

.outside
{
	width: 100px;
	height: 100px;
	background: red;
}
.inside
{
	width: 50px;
	height: 50px;
	background: green;
	margin-top: 50px;
}

<div class="outside">
	<div class="inside"></div>
</div>

期望效果

实际效果

解决办法是在父元素设置overflow：hidde属性。

.outside
{
	width: 100px;
	height: 100px;
	background: red;
	overflow: hidden;
}

在IE6/7下配合使用 zoom ： 1解决

.top
{
	height: 50px;
	background: red;
	margin-bottom: 50px;
}
.bottom
{
	height: 50px;
	background: green;
	margin-top: 50px;
}

<div class="top"></div>
<div class="bottom"></div>

这种情况是浏览器不希望编程人员使用上下重复的margin布局

关注