CSS-合并/塌陷

最新推荐文章于 2025-05-19 21:30:29 发布

270年前

最新推荐文章于 2025-05-19 21:30:29 发布

阅读量217

点赞数

文章标签： css

本文链接：https://blog.youkuaiyun.com/weixin_49344258/article/details/109034239

版权

本文详细介绍了CSS中margin的相关知识，包括如何实现元素的水平和垂直居中，margin负值的应用，以及外边距合并的概念。重点讨论了外边距塌陷问题，解释了在嵌套元素中，内部盒子的margin-top可能会应用到外部盒子上，导致布局异常。提出了几种解决margin-top塌陷的方法，如使用伪元素、设置边框、overflow:hidden等。

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

margin相关

1.设置元素水平居中：margin:x auto;(X代表上下位置，auto代表左右-水平居中）

2.margin 负值使元素位置及边框合并

3.设置文字垂直居中：line-height

4.一般制作网页时，需要设置margin(外边距-margin相对于上一个元素，如下图）：0；padding(内边距）：0；

5.外边距合并（只存在于垂直的两个盒子之间产生的关系）-外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。（上图下边距50PX，下图上边距100px。理论上两图之间的距离为150PX，实际为100px。合并后外边距高度等于发生合并以后外边距高度的较大者，即两者间距为100px）。

6.margin-top塌陷问题：在两个盒子嵌套时候（一个盒子包含另一个盒子），内部的盒子设置的margin-top 会加到外边的盒子上，会导致内部的盒子 margin-top 设置失败（设置里面盒子margin-top,会发现设置最外面的盒子）这就是margin-top的塌陷问题。

如下图：

解决如下：

使用伪元素类（：before伪元素选择器，里有个重要属性content,）
外部盒子（父元素）设置一个边框
外部盒子设置overﬂow:hidden(overflow:hidden既有解决塌陷的功能，又有隐藏元素的功能）

给父元素设置边框

给父元素设置overflow:hidden（给子元素添加没啥用）

以表格的形式展现，需要有行和列

解决

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>实例代码_09</title>
        <style type="text/css">
            .continer{
                width: 400px;
                height: 400px;
                background-color: deepskyblue;
                /*解决方式:*/
                /*(1)给父元素设置overflow:hidden*/;
                /*overflow:hidden;*/
                /*(2)给父元素添加边框属性*/
                /*border: 1px solid black;*/                
                }
                /*(3)使用伪类元素 解决*/
               .continer:before{
                content: '';
                display: table;
               }
               .iner{
                width: 200px;
                height: 200px;
                background-color: pink;
                /*产生margin-top塌陷问题*/
                margin-top: 100px;
                }
        </style>
    </head>
    <body>
        <div class="continer">
            <div class="iner"></div>
        </div>
    </body>
</html>