那是什么空间？

这个问题在这里已经有了答案：

如何去除内嵌块元素之间的空间？ 32个答案

---

该空间位于HTML中。 有几种可能的解决方案。 从最好到最差：

删除HTML中的实际空间（理想情况下，您的服务器可以在提供文件时为您完成此操作，或者至少您的输入模板可以适当间隔）http://jsfiddle.net/AWMMT/2/

使用float: left代替display: inline-block ，但是这对高度有不良影响：http://jsfiddle.net/AWMMT/3/

将容器的font-size设置为0，并为内部元素设置适当的font-size ：http://jsfiddle.net/AWMMT/4/ - 这很简单，但是不能利用相对字体关于内部元素的大小规则（百分比，em）

---

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

<div>...</div><div>...</div>
              ^
              |--- no whitespace/new line here.

您的空间是浏览器在显示时转换为“空格”的新行。

或者你可以试着用CSS来破解一下：

http://jsfiddle.net/AWMMT/6/

body { white-space: -0.125em; }
body > * { white-space: 0; /* reset to default */ }

---

实际上有一种非常简单的方法来从内联块中删除空白，这既简单又语义。 它被称为具有零宽度空间的自定义字体，它允许您使用非常小的字体在字体级别折叠空白（由内嵌元素的浏览器在分隔线上时添加）。 一旦你声明了字体，你只需更换容器上的字体系列，然后再回到孩子身上，瞧。 喜欢这个：

@font-face{ 
    font-family: 'NoSpace';
    src: url('../Fonts/zerowidthspaces.eot');
    src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/zerowidthspaces.woff') format('woff'),
         url('../Fonts/zerowidthspaces.ttf') format('truetype'),
         url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}

body {
    font-face: 'OpenSans', sans-serif;
}

.inline-container {
    font-face: 'NoSpace';
}

.inline-container > * {
    display: inline-block;
    font-face: 'OpenSans', sans-serif;
}

适合品尝。 这里下载了我刚刚在font-forge中制作的字体，并使用FontSquirrel webfont生成器进行了转换。 花了我5分钟。 包含css @ font-face声明：压缩的零宽度空间字体。 它位于Google云端硬盘中，因此您需要点击文件>下载将其保存到您的计算机上。 如果将声明复制到主css文件中，您可能还需要更改字体路径。

链接地址: http://www.djcxy.com/p/15777.html

上一篇: What is that space?

下一篇: CSS unwanted spacing between anchor