我在 html 中一起创建了两个元素,并将每个元素都设为内联块。我发现这两个元素之间总是存在差距,但实际上我没有为它们设置任何填充/边距属性。有人能告诉我为什么以及如何解决这个差距吗?
问问题
44090 次
4 回答
39
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>
于 2012-04-18T11:03:37.757 回答
20
您可以使用 HTML 注释删除空格并保持良好的代码格式。
<span>1</span><!--
--><span>2</span><!--
--><span>3</span>
于 2013-01-29T02:35:17.677 回答
11
当您使用inline-blocks
, 来删除边距时,只需将word-spacing: -3px;
和letter-spacing: -3px;
应用于父容器,然后使用 和 恢复内联块元素上的这些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;
为父容器。
于 2012-04-18T11:09:34.897 回答
2
这是一种奇怪的行为,可以修复,将您的标记更改为类似的内容。
<div class="inline">
first
</div><div class="inline">
second
</div>
在定义另一个内联元素时不要放置任何空格。
于 2012-04-18T11:03:25.407 回答