前端 -- margin的用法

最新推荐文章于 2025-05-27 11:32:54 发布

转载最新推荐文章于 2025-05-27 11:32:54 发布 · 280 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiangweilai/p/9686700.html

文章标签：

#前端 #ViewUI

本文深入探讨CSS中margin塌陷问题，解析标准流下兄弟盒子垂直margin的处理技巧，以及如何利用margin:0 auto实现盒子水平居中。同时，文章提供了避免塌陷的解决方案，并强调了在不同布局情况下margin使用的注意事项。

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

margin塌陷问题

当时说到了盒模型，盒模型包含着margin，为什么要在这里说margin呢？因为元素和元素在垂直方向上margin里面有坑。

我们来看一个例子：

html结构：

<div class="father">
    <div class="box1"></div>        
    <div class="box2"></div>
</div>

css样式：

       *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 400px;
            overflow: hidden;
            border: 1px solid gray;
        }
        .box1{
            width: 300px;
            height: 200px;
            background-color: red;
            margin-bottom: 20px;}
        .box2{
            width: 400px;
            height: 300px;
            background-color: green;
            margin-top: 50px;
        }

当给两个标准流下兄弟盒子设置垂直方向上的margin时，那么以较大的为准，那么我们称这种现象叫塌陷。没法解决，我们称为这种技巧叫“奇淫技巧”。记住这种现象，在布局垂直方向盒子的时候主要margin的用法。

当我们给两个标准流下的兄弟盒子设置浮动之后，就不会出现margin塌陷的问题。

margin：0 auto;

      div{
            width: 780px;
            height: 50px;
            background-color: red;
            /*水平居中盒子*/
            margin: 0px auto;
                        /*水平居中文字*/
            text-align: center;

        }

当一个div元素设置margin：0 auto;时就会居中盒子，那我们知道margin:0 auto;表示上下外边距离为0，左右为auto的距离，那么auto是什么意思呢？

设置margin-left:auto；我们发现盒子尽可能大的右边有很大的距离，没有什么意义。当设置margin-right:auto；我们发现盒子尽可能大的左边有很大的距离。当两条语句并存的时候，我们发现盒子尽可能大的左右两边有很大的距离。此时我们就发现盒子居中了。

另外如何给盒子设置浮动，那么margin:0 auto失效。

使用margin：0 auto;注意点：

1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;

2.只有标准流下的盒子才能使用margin:0 auto;

当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了

3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;

另外大家一定要知道margin属性是描述兄弟盒子的关系，而padding描述的是父子盒子的关系

善于使用父亲的padding，而不是margin

如果让大家实现如图的效果，应该有不少的同学做不出来。

那么我们来看看这个案例，它的坑在哪里？

下面这个代码应该是大家都会去写的代码。

        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 300px;
            height: 300px;
            background-color: blue;
        }
        .xiongda{
            width: 100px;
            height: 100px;
            background-color: orange;
            
            margin-top: 30px;
        }