html – 3个inline-block div,正好33％的宽度不适合父级

在HTML源代码中，当您有文本或图像行或内嵌块的元素时，如果它们之间有空格(空格，制表符或新行)，则会在单个空格字符之间添加一个空白字符他们在页面呈现时。例如，在以下HTML中，四个内容之间将出现一个空格：

one
two
<img src="three.png"/>
<span style="display: inline-block;">four<span>

这对于文本行以及出现在文本行内的小图像或HTML元素非常有帮助。但是，当将内联块用于布局目的而不是在文本段落内添加内容时，会成为问题。

删除额外的空间

避免在内嵌块元素之间添加的额外4px左右的空间的最安全的跨浏览器方式是删除HTML标签之间的HTML源代码中的任何空格。

例如，如果你有一个ul与3个浮动li标签：

<-- No space,tabs,or line breaks between </li> and <li> -->
<ul>
    <li>...</li><li>...</li><li>...</li>   
</ul>

不幸的是，这损害了网站的可维护性。除了使代码不可读，它严重损害了数据和格式的分离。

如果另一个程序员以后出现，并决定将每个li标签放在源代码中的单独行上(不知道标签为何在同一行上，或者可能通过HTML Tidy运行，甚至没有机会注意到任何相关的HTML评论)，突然网站有一个可能难以识别的格式错误。

考虑浮动元素

空白行为强烈地表明，使用内联块进行一般布局的目的可能不合适，可以将其用于除文本段落内的内容之外的任何内容。

此外，在某些情况下，内嵌块内容非常难以完全风格和对齐，尤其是在旧版浏览器上。

快速总结其他解决方案

>将关闭标签放在与下一个打开的标签相同的行上，它们之间没有空格。
>使用HTML注释来填充关闭标签和下一个打开标签之间的所有空格(如@Arbel建议的)。
>向每个元素添加一个负的左边距(通常为-3px或-4px，基于font-size)。我不推荐这个特别的方法。
>将容器元素的font-size设置为0或0.01em。这在Safari 5中不起作用(不确定后续版本)，并且可能会干扰响应设计网站，或任何使用除px以外的字体大小单位的网站。
>使用JavaScript或jQuery从容器中删除仅空白的文本节点。这在IE8和更早版本中不起作用，因为当元素之间只有空格时，文本节点不会在这些浏览器中创建，尽管元素之间仍然添加了空格。
>为容器设置字母间距和字间距(建议为@PhillipWills)。 Further info.这需要在网站上标准化em大小，这可能不是所有网站的合理选择。
>添加文本空间崩溃：丢弃;到容器(以前称为空白 – 空间崩溃)。不幸的是，任何浏览器都不支持this CSS3 style，而且还没有完全定义标准。