盒子常见margin和padding问题详解

最新推荐文章于 2024-08-07 15:58:16 发布

dreamer_zhou

最新推荐文章于 2024-08-07 15:58:16 发布

阅读量3k

点赞数 2

分类专栏： CSS 文章标签： margin padding bottom top 行内元素

本文链接：https://blog.csdn.net/wq_zhou/article/details/78080458

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、盒子嵌套竖直方向margin问题

问题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .box1 {
            width: 200px;
            height: 200px;
            background: red;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background: blue;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
</div>
</body>
</html>

这里写图片描述

解决方法：

给父元素浮动（float: left 或 right）
给父元素 overflow: hidden; 可能会将需要溢出的元素隐藏起来
给父元素 border-top : 1px solid transprent; 但是添加了一个边框边缘会有一些空白
给父盒子加padding值

解决结果：

这里写图片描述

总结：

问题原因：

一个父盒子如果没有padding-top和border-top，这个父盒子的margin-top会和其内部文档流中的第一个子元素的margin-top重叠

解决详解：

通俗讲，第一个子元素的margin-top作用在父元素上，这种情况存在于盒子上下级嵌套时，当父元素没有有效的padding-top或border-top时，第一个子元素的margin-top会一层一层找“领导”（祖先元素）的麻烦，只要给“领导”设置有效的padding或border，就可以管住子元素margin-top越级，假传圣旨，把自己的margin当领导的margin用
浮动和overflow: hidden触发了BFC。BFC元素特性表现原则是，内部子元素怎么翻江倒海，翻云覆雨都不会影响到外部的元素

二、竖直方向margin塌陷

问题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background: red;
            margin-bottom: 20px;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background: blue;
            margin-top: 30px;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

这里写图片描述

解决方法：

最佳方法是给上下两盒子各添加一个父盒子，父盒子添加overflow: hidden

解决结果：

这里写图片描述

总结：

问题原因：

外边距折叠（margin collapse）发生在普通流相邻兄弟元素（包括子元素）的竖直方向
外边距折叠有两种情况：一是父子外边距叠加，二是兄弟外边距叠加

解决详解：

外边距折叠发生在盒子margin是以最大的margin-top/bottom值为准
浮动和overflow:hidden触发了BFC，BFC在页面中就是一个独立的容器，容器里面的子元素不会影响外面的元素

三、行内元素标准流中margin竖直方向无效

问题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .span1 {
            float: left;
            background: red;
            margin: 20px;
        }
        .span2 {
            background: green;
            margin: 20px;
        }
    </style>
</head>
<body>
<span class="span1">span1</span>
<span class="span2">span2</span>
</body>
</html>

这里写图片描述

解决方法：

给当前行内元素浮动，margin-top与margin-bottom有效

解决结果：

见 span1

总结：

问题原因：

当在标准流中使用行内元素margin时，只有左右方向有效，当设置四个方向的margin值时，竖直方向margin无任何效果

解决详情：

给当前元素添加浮动，浮动后的元素脱离标准流不再受标准流中元素特性的影响

四、行内元素标准流中padding竖直方向无效

问题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 100px;
            height: 100px;
            background: brown;
        }
        .span1 {
            /*float: left;*/
            background: red;
            padding: 20px;
        }
        .span2 {
            background: green;
        }
        .span3 {
            display: block;
            width: 100px;
            height: 100px;
            background: gold;
        }
    </style>
</head>
<body>
<div class="box1">box1</div>
<span class="span1">span1</span>
<span class="span2">span2</span>
<span class="span3">span3</span>
</body>
</html>