css inline-block vs float [英] css inline-block vs float
问题描述
我对 float 和 inline-block 做了一些测试，我注意到有一个差异
I'm doing some tests on float and inline-block and i've noticed there is a difference between them.
您可以从 This Example ，如果我使用 display：inline-block ，div之间有一点边距，但如果我使用<$ c $
As you can see from THIS EXAMPLE, that if I use display:inline-block the divs have a little margin between them but if I use float:left it works as expected.
请注意，我使用的是Eric Meyer的Reset CSS v2.0。
Please note that i'm using Eric Meyer's Reset CSS v2.0.
是因为我做错了什么，或者是 inline-block 行为的方式（在这种情况下它不是非常可靠。）
Is it because I'm doing something wrong or is this the way inline-block behaves (in that case it is not very reliable).
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;
}
推荐答案
c $ c> font-size：0; 。
Give the parent element font-size: 0;.
然后，设置 font-size 的 font-size：12px （或任何你的设计指定的大小），如下：
Then, set the font-size of the children to font-size: 12px (or whatever size your design dictates), like this:
#wrap{
font-size:0;
}
.square{
font-size:12px;
}
这篇关于css inline-block vs float的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
