两个内联块 <span> 元素之间的间隙 [重复]

Posted 2023-03-06

【中文标题】两个内联块 <span> 元素之间的间隙 [重复]

【英文标题】：The gap between two inline-block <span> element [duplicate]

【发布时间】：2012-04-29 18:46:07

【问题描述】：

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

【问题讨论】：

根据规范，如果两个元素之间有任何空白，空白将折叠成一个空格。

你有密码吗？也许是一个 JS 小提琴？你真的应该接受你的一些问题的答案，它让人们不想回答:)

【参考方案1】：

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>

【讨论】：

谢谢，伙计。这是为我修复它的最简单方法。

【参考方案2】：

您可以使用 HTML cmets 删除空格并保持良好的代码格式。

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

【参考方案3】：

当您使用inline-blocks 时，只需将word-spacing: -3px; 和letter-spacing: -3px; 应用于父容器，然后使用word-spacing: normal; 和@ 将这些规则恢复到内联块元素上即可987654325@

例如使用这个基本标记

<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; 设置为父容器。

【讨论】：

非常棘手！！！干杯！

【参考方案4】：

这是一种奇怪的行为，可以修复，将您的标记更改为类似的内容。

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

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

【讨论】：

他们需要实现white-space-collapse: discard;！