显示：内联块-那是什么空间？

Question

内联块之间有这个怪异的空间。我可以忍受它，直到通过AJAX Call加载更多内容时，微小的空间就会消失。我知道我在这里想念什么。

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

实际上，有一种非常简单的方法可以从内联块中删除空白，这既简单又语义。它被称为带有零宽度空格的自定义字体，它允许您使用非常小的字体在字体级别折叠空白（当行内元素位于单独的行时由浏览器添加的空白）。声明字体后，只需在容器上更改字体系列，然后再在子级上更改字体，瞧。像这样：@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文件中，则可能还需要更改字体路径。