1.第一个子级的margin top 会传递给父级

最新推荐文章于 2024-11-26 17:14:50 发布

咖喱鸡块

最新推荐文章于 2024-11-26 17:14:50 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css 文章标签：第一个子级的margin top 会传递

本文链接：https://blog.youkuaiyun.com/hh279768876/article/details/51969818

css 专栏收录该内容

35 篇文章

订阅专栏

本文探讨了在CSS布局中，子元素的margin-top属性如何影响其父元素，并提供了三种有效的解决方案：为父元素添加边框、使用overflow:hidden属性及采用父元素padding-top替代子元素margin-top。

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

1.第一个子级的margin top 会传递给父级

   解决办法如下:
     1.给父级添加border;
        2.父级使用overflow:hidden;
           3.不要使用margin-top 用父级padding-top 温馨提示:注意盒子的空间

<!-- <!DOCTYPE html>

<html>
<head>
   <meta charset="UTF-8">
   <title>asd</title>
   <link rel="stylesheet" href="css/reset.css">
   <style type="text/css">
   #a{
       margin: 0 auto;
       width: 500px;
       height: 500px;
       background: blue;
   /*   margin-top:20px; */
   }
   #b{
       width: 300px;
       height: 300px;
       background: red;
   /*   margin-top:20px; */
   }
   #c{
       width: 100px;
       height: 100px;
       background: yellow;
       /*margin-top:20px; */
       margin-left: 20px;
   }
   </style>
</head>
<body>
<div id="a">
   <div id="b">
       <div id="c">

       </div>
   </div>
</div>
</body>

</html> -->