盒模型-上下margin叠加问题
2021-12-11 本文已影响0人
如雨随行2020
一开始，我们给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;
}
