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

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文件中，则可能还需要更改字体路径。