网页设计：Css大坑之一，设置margin无效

最新推荐文章于 2024-03-29 19:28:12 发布

2365708346

最新推荐文章于 2024-03-29 19:28:12 发布

阅读量1.4w

点赞数 46

文章标签： css html html5

本文链接：https://blog.csdn.net/qq_44131760/article/details/114497154

版权

本文详细探讨了CSS中垂直外边距的重叠现象，包括兄弟元素之间的外边距合并及父子元素间的外边距传递。通过实例展示了当设置margin属性时，如何导致外边距无效，并提出了四种解决方案，包括使用边框、padding、相对定位和浮动。文章旨在帮助开发者理解和解决此类布局问题。

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

出现这个问题基本和垂直外边距的特性有关。注意是垂直外边距margin-top/bottom啊，不是水平外边距。

垂直外边距特性：

1.兄弟盒子的垂直外边距会重合，取兄弟元素设置的margin属性最大值。比如上面的盒子设置margin-bottom:200px，下面盒子设置margin-top:100px，那最终两个盒子隔开距离是200px。

2.父子盒子的垂直外边距会传递，在一定的条件下，由子元素margin-top属性会单方向传递给父元素的margin-top属性。

下面会进行实验，看看margin具体是怎么无效的。看一下实验场景：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标题</title>
        <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
            .box1{
                height: 200px;
                width: 200px;
                background-color: darkorange;
                /* margin-top: 100px; */
                
            }
                .box1-1{
                    height: 100px;
                    width: 100px;
                    background-color:rgb(0, 49, 209);
                    /* margin-top: 30px; */
                    /* border-style: solid; */
                }
            .box2{
                height: 200px;
                width: 200px;
                background-color: darkorchid;
            }
            .box3{
                height: 200px;
                width: 200px;
                background-color: darkred;
            }
            .box4{
                height: 200px;
                width: 200px;
                background-color: rgb(252, 172, 146);
            }
        </style>
         
    </head>
    <body>
        <div class="box1">
            <div class="box1-1">

            </div>
        </div>
        <div class="box2">
            
        </div>
        <div class="box3">
            
        </div>
        <div class="box4">
            
        </div>
    </body>
     
</html>

body里面有4个大盒子，其中box1有一个子盒子box1-1；box1/2/3/4互相之间是属于兄弟元素。box1和box1-1之间属于父子元素。

渲染出的页面：
在这里插入图片描述
然后我们想把橙色盒子和紫色盒子隔开一些。于是对紫色盒子设置margin-top：200px属性。

在这里插入图片描述
设置以后，确实紫色盒子和橙色盒子隔开了200px；

但当我们设置橙色盒子margin-bottom:100px;后，发现橙色和紫色盒子垂直距离没有变化，也就是发生了无效的情况。按文章开头提到的特性，此时只有紫色盒子的margin-top:200px;生效。

解决方案：无需解决，只需要记住规律就可以。实在有强迫症可以把无效的属性删除，比如上面的删除橙色盒子的margin-bottom:100px;

然后说一下父子盒子margin设置无效。

简单说一下父子盒子的关系。父子盒子也叫父子元素，盒子也就是div是html元素的一种，我比较喜欢把单纯的div标签元素称为盒子。然后一个A盒子里面放一个盒子B，那A就是B的爹。

实验场景中，我在橙色盒子里放一个蓝色盒子。现在我想把蓝色盒子在橙色盒子里往下移一点，也就是这样：
在这里插入图片描述
于是乎首先想到的是设置蓝色盒子margin-top:50px;

但实际是橙色盒子往下移动了50px，蓝色盒子在橙色盒子内没有移动，margin-top不生效。
在这里插入图片描述

解决方法：

1.给父盒子加一个边框属性border-style:solid;
然后把边框颜色变透明：border-color:rgba(0,0,0,0);
但有副作用，那就是父子盒子之间会隔开距离，距离为边框的默认宽度3px（因为我没有设置边框宽度，所以是3px），如图所示（仔细看，蓝色和橙色之间有微小缝隙）：
在这里插入图片描述
当然你也可以只设置border-top-style，这不会影响水平。但橙色盒子同样会受到边框的影响，被拉长了3px，当然这在逻辑上很好解决，把高度减少相应的数值就可以。甚至如果你的网页不需要很严谨的显示效果，这个方法值得采用的，在逻辑上容易理解，而且把布局改动局限在一小块地方。因为Css理念就是通过摆放div来调整网页结构，就像实体的物理建筑一样。说到这个，你甚至可以再拿一个50px高的盒子像一个柱子一样放在蓝色盒子和橙色盒子之间，撑开他们的距离，但橙色盒子高度也要相应减少50px。

2.不对子盒子使用margin-top属性，对父盒子使用padding-top属性。这个方法同样有副作用，那就是橙色盒子高度被多撑开了50px，是从padding-top的50px那来的。如图所示：

在这里插入图片描述
padding-top多出来的50px，在父盒子高度height属性那减去50px抵消就可以。

以上两种方法都是从结构来使得蓝色盒子在橙色盒子里往下移动，下面说说其他方法是怎么做的

3.相对定位。

先设置成相对定位：position:relative;然后在子盒子的Css样式中加入：top:50px; 即可让蓝色盒子在橙色盒子中往下50px，蓝色盒子相对于它原来的位置往下移动50px。关于相对定位本文就不展开讲了，感兴趣的可以百度仔细了解相对定位是如何使用的。

.box1-1{
                    height: 100px;
                    width: 100px;
                    background-color:rgb(0, 49, 209);
                    position: relative;
                    top: 50px;
                }

4.可以设置浮动，此时设置margin有效且不会被继承，但会牵扯到浮动的问题。

.box1-1{
                    height: 100px;
                    width: 100px;
                    background-color:rgb(0, 49, 209);
                    float: left;
                    margin-top: 50px;
                }