这个问题在这里已有答案:
内联块在它们之间有这个奇怪的空间。我可以忍受它,直到某一点,如果我用AJAX调用加载更多内容,那么微小的空间就会消失。我知道我在这里遗漏了一些东西。
div {
width: 100px;
height: auto;
border: 1px solid red;
outline: 1px solid blue;
margin: 0;
padding: 0;
display: inline-block;
}
如何使Inline块中的间距保持一致?
空间在HTML中。有几种可能的解决方案。从最好到最差:
float: left
而不是display: inline-block
,但这对高度有不良影响:http://jsfiddle.net/AWMMT/3/font-size
设置为0并为内部元素设置合适的font-size
:http://jsfiddle.net/AWMMT/4/ - 这很简单,但是你不能利用内部元素的相对字体大小规则(百分比,em)<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; }
旧答案(仍适用于旧的,前Flexbox浏览器)http://jsfiddle.net/AWMMT/6/
body { white-space: -0.125em; } body > * { white-space: 0; /* reset to default */ }
实际上有一种非常简单的方法可以从内联块中删除空白,这既简单又语义。它被称为具有零宽度空间的自定义字体,允许您使用非常小的字体折叠字体级别的空格(由浏览器添加内嵌元素,当它们位于不同的行上时)。声明字体后,只需更改容器上的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 zero-width space font。它位于Google云端硬盘中,因此您需要点击文件>下载将其保存到您的计算机。如果将声明复制到主css文件,则可能还需要更改字体路径。
你可以评论空白。
2013年的原始答案
喜欢:
<span>Text</span><!--
--><span>Text 2</span>
编辑2016:
我也喜欢以下方法,您只需将右括号放在下一个元素之前。
<span>Text</span
><span>Text 2</span>
你也可以这样做(恕我直言,我认为这是非常正确的)
<div class="div1">...</div>
<div class="div1">...</div>
.
.
.div1{
display:inline-block;
}
.div1::before, div1::after { white-space-collapse:collapse; }