css 子元素margin-top影响了父元素

最新推荐文章于 2023-03-28 15:02:44 发布

路过君_P

最新推荐文章于 2023-03-28 15:02:44 发布

阅读量425

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/zhoudingding/article/details/109599139

前端专栏收录该内容

156 篇文章

订阅专栏

本文解析了CSS中盒模型的Margin折叠现象及其原因，并提供了几种避免该现象的方法，包括使用浮动、绝对定位、overflow属性等。

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

源码

<!DOCTYPE HTML>
<html manifest="">
<head>
  <style>
    .box1 {
      background-color: deepskyblue;
      height: 200px;
      width: 200px;
    }
    .box2 {
      background-color: coral;
      margin-top: 50px;
      height: 50px;
      width: 200px;
    }
  </style>
</head>
  <body>
  <div class="box1">
    <div class="box2">
    </div>
  </div>
  </body>
</html>

效果

可以看到box1虽然没有margin-top:50px，但是上方也留出了50px
在这里插入图片描述

原因

css盒模型规定：

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.
所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。