为什么跨度会因元素定义之间的空间而有所不同?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了为什么跨度会因元素定义之间的空间而有所不同?相关的知识,希望对你有一定的参考价值。
为什么元素布局对它们之间存在空格或换行有关系?
例如。 <span/><span/>
的行为与<span/> <span/>
不同(注意空间)。
我想要解决的是让我的span元素换行,但是当它们没有断开时也没有可见空间。在下面的代码片段中,您可以看到在第一个宽度然后是一个狭窄段落中定义的跨度对,第一个不使用任何间距的示例不会像其他段落那样进行换行。
这是为什么?是否有一个术语我可以谷歌了解更多?当容器很窄时,我怎么能有两个跨度总是换行?当容器足够宽时,它们之间没有可见空间?
p {
width: 135px;
background-color: pink;
}
.narrow {
width: 35px;
}
h1 {
font-size: 140%;
}
<h1>
No space:
</h1>
<p>
<span>Foo</span><span>Bar</span>
</p>
<p class="narrow">
<span>Foo</span><span>Bar</span>
</p>
<h1>
Space between element definitions:
</h1>
<p>
<span>Foo</span> <span>Bar</span>
</p>
<p class="narrow">
<span>Foo</span> <span>Bar</span>
</p>
<h1>
New line between element definitions:
</h1>
<p>
<span>Foo</span>
<span>Bar</span>
</p>
<p class="narrow">
<span>Foo</span>
<span>Bar</span>
</p>
答案
这个空间被称为白色空间,就像你在两个单词之间放置的空间。所以this is a text
与thisisatext
不同,span
是一个内联元素,所以它的行为就像文本一样。
要删除它们,您可以将font-size设置为0:
p {
width: 135px;
background-color: pink;
font-size:0;
}
.narrow {
width: 35px;
font-size:0;
}
span {
font-size:initial;
}
h1 {
font-size: 140%;
}
<h1>
No space:
</h1>
<p>
<span>Foo</span><span>Bar</span>
</p>
<p class="narrow">
<span>Foo</span><span>Bar</span>
</p>
<h1>
Space between element definitions:
</h1>
<p>
<span>Foo</span> <span>Bar</span>
</p>
<p class="narrow">
<span>Foo</span> <span>Bar</span>
</p>
<h1>
New line between element definitions:
</h1>
<p>
<span>Foo</span>
<span>Bar</span>
</p>
<p class="narrow">
<span>Foo</span>
<span>Bar</span>
</p>
以上是关于为什么跨度会因元素定义之间的空间而有所不同?的主要内容,如果未能解决你的问题,请参考以下文章