关于margin-top失效的情况

最新推荐文章于 2024-09-05 15:37:22 发布

原创最新推荐文章于 2024-09-05 15:37:22 发布 · 917 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #html

前端同时被 3 个专栏收录

380 篇文章

订阅专栏

233 篇文章

订阅专栏

浏览器

48 篇文章

订阅专栏

博客主要讲述在CSS中，使用子元素的margin-top使子元素与父元素有上边距时，会出现父元素被带跑的情况。原因是毗邻盒元素的margin会合并共享，若父元素无padding-top和border-top，会与子元素上边距重叠。还提及了解决方案。

有时，我们想子元素距离父元素上边距一段距离，想着用margin-top。

 <style>
     .parent{
     width: 200px;
     height: 200px;
     background-color: blueviolet;   
    }
    .son{
        width: 100px;
        height: 100px;
        background-color: red;
        margin-top: 100px;
    }
   </style>

效果如下：
直接把父元素带跑了。
在这里插入图片描述
原因在于：

所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。
一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

说白了就是他们的margin会共享，所以将带着父元素移下来呢，
解决方案：

给父元素设置：
1-