解决margin塌陷问题

最新推荐文章于 2022-10-22 00:48:12 发布

小歘欻

最新推荐文章于 2022-10-22 00:48:12 发布

阅读量254

点赞数

分类专栏： HTML 文章标签： html5 css

本文链接：https://blog.csdn.net/qq_33840688/article/details/118750737

版权

margin塌陷 CSS布局边框 overflow:hidden 伪元素

关键词由CSDN通过智能技术生成

HTML 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

什么是margin塌陷

在标准文档流中，竖直方向的margin会出现叠加现象（水平方向不会塌陷），两个margin紧挨着，中间没有border或者padding
margin直接接触，就产生了合并
表现为较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin，这就是margin塌陷现象

解决margin塌陷的方法

1. 设置边框
2.overflow:hidden 溢出隐藏
3.name:before{content:''; display:table;}设置伪类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 解决margin塌陷的两种方法
				1. 设置边框
				2.overflow:hidden 溢出隐藏
				3. .name:before{content:''; display:table;}设置伪类
			*/
			.box{
				height: 12.5rem;
				width: 12.5rem;
				background-color: aquamarine;
				/* border: 1px solid #000000; */
			}
			.nbox{
				margin-top: 3.125rem;
				height: 3.125rem;
				width: 3.125rem;
				background-color: black;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="nbox"></div>
		</div>
	</body>
</html>

父盒子没有设置边框，子盒子的margin合并到了父类上，造成了塌陷。

加上边框

塌陷问题就解决了。

overflow:hidden 隐藏溢出

.box{
				height: 12.5rem;
				width: 12.5rem;
				background-color: aquamarine;
				/* border: 1px solid #000000;*/
				overflow: hidden;
			}

为父盒子添加隐藏溢出也能解决margin塌陷。

小歘欻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决margin塌陷问题

什么是margin塌陷在标准文档流中，竖直方向的margin会出现叠加现象（水平方向不会塌陷），两个margin紧挨着，中间没有border或者paddingmargin直接接触，就产生了合并表现为较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin，这就是margin塌陷现象解决margin塌陷的方法1. 设置边框 2.overflow:hidden 溢出隐藏 3.name:before{content:''; display:table;}设
复制链接

扫一扫

专栏目录