[Web前端] Margin 失效问题, 设置了 Margin 却不见效果, 解决方案.

最新推荐文章于 2023-10-14 14:08:38 发布

SlimeNull

最新推荐文章于 2023-10-14 14:08:38 发布

阅读量4.3k

点赞数 4

分类专栏：笔记成长记录文章标签： html css css3 html5

本文链接：https://blog.csdn.net/m0_46555380/article/details/114476442

版权

笔记同时被 2 个专栏收录

62 篇文章

订阅专栏

成长记录

35 篇文章

订阅专栏

本文探讨了CSS中margin在子元素嵌套时的特殊行为，指出当父元素没有指定overflow时，子元素margin可能失效。通过实例和overflow: hidden的使用，解释了如何修复这一问题，并介绍了margin与padding、border的关系。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先演示下:

.box1{
    width: 300px;
    height: 300px;
}
.box2{
    width: 200px;
    height: 200px;
}
.border-with{
    border: solid 1px purple;
}
.padding-with{
    padding: 1px;
}
.style-pink{
    background-color: pink;
}
.style-green{
    background-color: green;
}
.margin-able{
    margin: 10px;
}
.margin-fix{
    overflow: hidden;
}

<div class="box1 style-pink"></div>
<div class="box1 style-pink margin-able">
	<div class="box2 style-green margin-able"></div>
</div>

效果:

发现, 绿色盒子我们明明定义了margin, 而顶部的margin却没有起作用.

审查元素, 发现是这个情况:

并且发现, 如果指定padding或border, 那么它们就会变得正常.

最好的修复方式是这样, 为父元素指定overflow为hidden:

可以给出一个我猜测的结论. margin是只是指与其他元素的间距, 即便它叫外边距. 因为父元素已经与上面的元素间距为5, 并且子元素没办法与别的元素产生边距, 所以就相对于最上方的元素计算边距, 即相对于父元素的间距是0. 而如果我们指定了border或padding, 他就会相对这多出的控件来运算边距, 即此时的margin相对于父元素.

另外overflow也是一个奇妙的样式, 它还可以用来修复子元素float引起的高度塌陷问题.