css内联块vs浮动

我正在做一些测试float和inline-block，我注意到它们之间有区别。css内联块vs浮动

正如你可以从THIS EXAMPLE看到的那样，如果我使用display:inline-block这些div在它们之间有一点余量，但是如果我使用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; 
}

来源

2012-11-26 Tomer

给出父元素font-size: 0;。

然后，将孩子的font-size到font-size: 12px（或任何尺寸设计使然），像这样：

#wrap{ 
    font-size:0; 
} 
.square{ 
    font-size:12px; 
}

来源

2012-11-26 09:03:42

我做对float和inline-block的一些测试，我注意到有是他们之间的差异。

无论资源给你的暗示，他们可能不是是一样的误导。他们是completely different things。

的div让他们

之间的一个小保证金这不是一个margin。这是由HTML中的div之间的换行产生的空间。一种解决方案是删除换行符，另一种方法是在包含元素上设置font-size: 0（因此导致空格不被渲染）。

请注意，如果您使用第二种方法，则需要在内部div上设置另一个font-size，否则其中的文本将不会呈现。

希望有帮助！

来源

2012-11-26 09:03:32 Chris

谢谢，我不知道换行符被视为空格。 – Tomer

@ ftom2是的，HTML就是这种情况。同样，选项卡呈现为空格。 – Chris

正是由于空间。如果在容器元素上设置了font-size: 0，间隔将消失（请确保重置内联块上的font-size）。

来源

2012-11-26 09:03:54 Henrik

据我所知，内嵌块元素将显示与原生其他内联对象相同的自动伪间距。而浮动元素被视为与文档的对象流相关的完全独立（所以，没有烦人的差距）。

对不起，我不能给出更详细的答案，但这绝对是我以前摔跤的东西。对于什么是值得的，间距应该是可靠的恼人的行内块元素，你只需要记住要补偿这些伪裕量如果你正在试图包含在父元素中的所有东西而不被推到下一行。

来源

2012-11-26 09:15:42 monners

css内联块vs浮动

回答

相关问题