显示:内联块 - 这是什么空间？

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/

如何使Inline块中的间距保持一致？

Answer 1

空间在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)

Answer 2

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

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

您的空间是浏览器在显示时转换为"空格"的新行.

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

flexbox方便地忽略其子元素之间的空白,并且将显示与连续的内联块元素类似的内容.

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

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

旧答案(仍适用于较旧的pre-flexbox浏览器) http://jsfiddle.net/AWMMT/6/

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

Answer 3

实际上有一种非常简单的方法可以从内联块中删除空白,这既简单又语义.它被称为具有零宽度空间的自定义字体,它允许您使用非常小的字体折叠字体级别的空格(由浏览器添加内嵌元素,当它们位于不同的行上时).声明字体后,只需更改容器上的font-family,然后再返回子项,瞧.像这样:

@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声明:zipped零宽度空格字体.它位于Google云端硬盘中,因此您需要点击文件>下载将其保存到您的计算机.如果将声明复制到主css文件,则可能还需要更改字体路径.

Answer 4

你可以评论空白.

2013年的原始答案

喜欢:

<span>Text</span><!--

--><span>Text 2</span>

编辑2016:

我也喜欢以下方法,您只需将右括号放在下一个元素之前.

<span>Text</span

><span>Text 2</span>