Tom*_*mer 8 html css css-float
我正在进行一些测试float,inline-block并且我注意到它们之间存在差异.
正如你从这个例子中看到的那样,如果我使用display:inline-blockdiv,它们之间有一点差距但是如果我使用float:left它就会按预期工作.
请注意我正在使用Eric Meyer的Reset CSS v2.0.
是因为我做错了什么还是这样的inline-block行为(在这种情况下它不是很可靠).
HTML
<!DOCTYPE html>
<html>
<head>
<title>How padding/margin affect floats</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrap">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</body>
</html>
CSS(不重置)
#wrap{
width: 600px;
margin:auto;
}
.square{
width: 200px;
height: 200px;
background: red;
margin-bottom: 10px;
/*display: inline-block;*/
float:left;
}
给出父元素font-size: 0;。
然后，将font-size子项设置为font-size: 12px（或您的设计指定的任何大小），如下所示：
#wrap{
font-size:0;
}
.square{
font-size:12px;
}