两个内联块之间的差距<span>元素

问题描述：

我在html中创建了两个元素，并且每个元素都是一个内联块。我发现这两个元素之间总是有差距，但实际上我没有为它们设置任何填充/边距属性。有人能告诉我为什么以及如何解决这个问题？两个内联块之间的差距<span>元素

如果在两个元素之间根本没有任何空格会根据规范将空白合并到单个空间中。 – 2012-04-18 11:01:47

你有代码吗？也许一个JS小提琴？你应该真的接受你的一些问题的答案，它会让人不能回答:) – mattytommo 2012-04-18 11:02:05

答

CSS：

span { 
    display: inline-block; 
}

HTML：

<span>This will have</span> 
<span>a gap between the elements</span> 

<span>This won't have</span><span>a gap between the elements</span>

Thans，男人。这是为我解决这个问题的简单方法。 – chaonextdoor 2012-04-19 04:46:28

答

这是一个奇怪的行为，它可以修复，改变你的标记为这样的东西。

<div class="inline"> 
    first 
</div><div class="inline"> 
    second 
</div>

定义另一个内联元素时不要放任何空格。

他们需要实现'空白崩溃：放弃'！ – easwee 2012-04-18 11:27:37

答

当你使用 inline-blocks，除去保证金只适用 word-spacing: -3px;和 letter-spacing: -3px;到 父容器，然后还原上inline-这些规则

块元素word-spacing: normal;和letter-spacing: normal;

例如与此基本标记

<div> 
    <span>...</span> 
    <span>...</span> 
    <span>...</span> 
</div>

最小的CSS代码

div { 
    word-spacing: -3px; 
    letter-spacing: -3px; 
} 

span { 
    word-spacing: normal; 
    letter-spacing: normal; 
    display: inline-block; 
}

另一种可能（我不推荐，但它可能是有用的，你知道，反正）是设置font-size: 0;父容器。

非常棘手！干杯! – 2013-11-20 11:47:19

答

您可以使用HTML注释删除空白并保留漂亮的代码格式。

<span>1</span><!-- 
--><span>2</span><!-- 
--><span>3</span>

两个内联块之间的差距元素

相关推荐