当前位置： 移动技术网 > IT编程>网页制作>HTML > 轻松解决外边距塌陷的几种方法(你值得收藏)

轻松解决外边距塌陷的几种方法(你值得收藏)

2020年07月11日  | 移动技术网IT编程  | 我要评论

在这里插入图片描述
什么是外边距塌陷？满足以下条件就会产生外边距塌陷现象：

  1. 产生在嵌套元素中（父元素与子元素）
  2. 垂直方向上的外边距合并现象（margin-top和margin-bottom）

话不多说,直接上代码进行演示:带你走向人生的的巅峰,哈哈哈

html:

<div class="father">
	<div class="son"></div>
</div>

css:

<style>
	*{
		margin: 0;
		padding: 0;
    }
	.father{
	    width:300px;
		height:300px;
		background-color:pink;
	 }
	.son{
		width:100px;
		height:100px;
		background-color:skyblue;
	}
</style>

此时浏览器的效果图为:
在这里插入图片描述
那我们想让天蓝色的子元素距离粉色的父元素有一点距离,然后给子元素一个margin-top,代码如下:

<style>
	*{
		margin: 0;
		padding: 0;
	}
	.father{
		width:300px;
		height:300px;
		background-color:pink;
	}
	.son{
		width:100px;
		height:100px;
		background-color:skyblue;
		margin-top:50px;
	}
</style>

咦~~这个时候我们就会发现这不是我们想要的效果…
给子元素一个上边距，父元素也跟着有了外边距，这就是外边距塌陷，那么我们应该怎么解决这个问题呢？
在这里插入图片描述
解决方案:

1. 给父元素加边框border
2. 给父元素加内边距padding
3. 给父元素加overflow:hidden

<style>
	*{
		margin: 0;
		padding: 0;
	}
	.father {
		width: 300px;
		height: 300px;
		background-color: pink;
		/*border: 1px solid pink;*/
		/*padding: 1px;*/
		overflow: hidden;
	}
	
	.son {
		width: 100px;
		height: 100px;
		background-color: skyblue;
		margin-top: 50px;
	}
</style>

此三种方式任意一种都可以轻松解决外边距塌陷问题,效果如图下图所示:
也就达到了我们之前想要的效果,是不是美滋滋…赶紧收藏以后备用吧…
在这里插入图片描述
在这里插入图片描述

本文地址：https://blog.csdn.net/hong521520/article/details/107221942

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网