内联块：探索其空间特性

Question

内联块之间有一个奇怪的间隔。我可以接受它，直到我用AJAX调用加载更多内容时，这个小间隔就消失了。我知道我在这里漏了什么。

div {
    width: 100px;
    height: auto;
    border: 1px solid red;
    outline: 1px solid blue;
    margin: 0;
    padding: 0; 
    display: inline-block;
}

http://jsfiddle.net/AWMMT/

如何使内联块之间的间距保持一致？

Answer 1

http://jsfiddle.net/AWMMT/1/

<div>...</div><div>...</div>
              ^
              |--- 这里没有空格或换行符。

你的空格是浏览器在显示时转换成“空格”的换行符。

或者你可以尝试使用CSS进行一些小的调整：

一个flexbox会方便地忽略其子元素之间的空格，并且会类似于连续的inline-block元素进行显示。

http://jsfiddle.net/AWMMT/470/

body { display: flex; flex-wrap: wrap; align-items: end; }

Answer 2

空格在HTML中。有几种可能的解决方案。从最好到最差：

1. 在HTML中删除实际的空格（理想情况下，服务器在提供文件时可以为您执行此操作，或者至少您的输入模板可以适当地添加空格）http://jsfiddle.net/AWMMT/2/
2. 使用float: left而不是display: inline-block，但这会对高度产生不良影响：http://jsfiddle.net/AWMMT/3/
3. 将容器的font-size设置为0，并为内部元素设置适当的font-size：http://jsfiddle.net/AWMMT/4/ - 这非常简单，但是您无法利用内部元素上的相对字体大小规则（百分比，em）