盒模型-上下margin叠加问题

最新推荐文章于 2022-04-08 17:04:19 发布

如雨随行2020

最新推荐文章于 2022-04-08 17:04:19 发布

阅读量995

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/qq_22038259/article/details/82658007

版权

前端专栏收录该内容

32 篇文章 4 订阅

订阅专栏

一开始，我们给a和b都设置了margin：10px；
理论上a和b之间的距离应该是20px，但实际上，a和b之间的距离只有10px;
（这个大小取决于a的margin-bottom和b的margin-top的大小，取大的那个）；
这是因为css设计所造成的，css设计者考虑到我们要对段落进行控制，比如多个p标签
形成的段落，如果这些p标签都具备margin：10px的属性的话，那么他们中第一段落的顶部
外边距是10px，而第一与第二段落之间是20px，由此造成排版不一致所以设计这种百边
叠加原则。（原则如上面括号解释）。

div.html代码：

<html>
    <head>
        <title>div</title>
        <link rel = "stylesheet" type="text/css" href = "layout.css">
    </head>
    <body>
        <div id ="a">a</div>
        <div id="b">b</div>
    </body>
</html>

layout.css:

#a{
    background-color:#cccccc;
    border:2px solid#333333;
    width:100px;
    height:100px;
    margin:10px;
}
#b{
    background-color:#cccccc;
    border:2px solid#333333;
    width:100px;
    height:100px;
    margin:10px;
}

那么如何消除这种影响呢？
对于css的解释规则而言，一旦把某个元素设定了float属性，那么它们将不再进行空白边
叠加。

#a{
    background-color:#cccccc;
    border:2px solid#333333;
    width:100px;
    height:100px;
    margin:50px;
    float:left;
}
#b{
    background-color:lightgreen;
    border:2px solid#000000;
    width:100px;
    height:100px;
    margin:50px;
    float:left;
    clear:left;
}

左右margin加倍问题
当我们的盒对象为浮动状态时，在IE6之中，盒对象的左右margin会加倍。这是IE6的css
解析问题，我们可以通过设置对象的display：inline；来解决。

#a{
    background-color:#cccccc;
    border:2px solid#333333;
    width:100px;
    height:100px;
    margin:50px;
    float:left;
    display:inline;
}
#b{
    background-color:lightgreen;
    border:2px solid#000000;
    width:100px;
    height:100px;
    margin:50px;
    float:left;
    clear:left;
    display:inline;
}

如雨随行2020

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
盒模型-上下margin叠加问题

一开始，我们给a和b都设置了margin：10px；理论上a和b之间的距离应该是20px，但实际上，a和b之间的距离只有10px; （这个大小取决于a的margin-bottom和b的margin-top的大小，取大的那个）；这是因为css设计所造成的，css设计者考虑到我们要对段落进行控制，比如多个p标签形成的段落，如果这些p标签都具备margin：10px的属性的话，那么他们中第...
复制链接

扫一扫