我在html中一起创建了两个元素,并使每个元素成为一个内联块。我发现这两个元素之间总是存在差距,但实际上我没有为它们设置任何填充/边距属性。有人能告诉我为什么以及如何解决这个差距?
答案 0 :(得分:32)
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>
答案 1 :(得分:19)
您可以删除空格并使用HTML注释保持良好的代码格式。
<span>1</span><!--
--><span>2</span><!--
--><span>3</span>
答案 2 :(得分:10)
当您使用inline-blocks
时,要删除边距,只需将word-spacing: -3px;
和letter-spacing: -3px;
应用于父容器,然后在内联块元素上恢复这些规则使用word-spacing: normal;
和letter-spacing: normal;
e.g。使用此基本标记
<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;
设置为父容器。
答案 3 :(得分:2)
这是一种奇怪的行为,可以修复,将标记更改为此类内容。
<div class="inline">
first
</div><div class="inline">
second
</div>
定义另一个内联元素时,不要放置任何空格。