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

Question

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

Answer 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>

Answer 2

您可以删除空格并使用HTML注释保持良好的代码格式.

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

Answer 3

当您使用inline-blocks,除去保证金只是申请word-spacing: -3px;和letter-spacing: -3px;于父容器,然后恢复与inline-block的元素,这些规则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;为父容器.