有如下代码
<p class="text">
<span>H</span>
<span>e</span>
<span>l</span>
<span>l</span>
<span>o</span>
</p>
.text {
display: block;
text-align: center;
font-size: 20px;
font-family: monospace;
}
.text>span {
margin: 0;
}
- 可以发现span元素间的间距莫名地大,原因是在html中行内元素间的换行符是有意义的,用户代理在渲染时会将行内元素间的换行符渲染为
{width:当前行内元素fontSize属性的一半;height:当前行内元素fontSize属性}
的空白。 - 比如上述例子中fontSize属性为20px,那么换行符会被渲染为10X20的空白。也就是说行内元素之间莫名多了10px的横向间距。
通过设置margin来解决
.text {
display: block;
text-align: center;
font-size: 20px;
font-family: monospace;
}
.text>span {
margin: 0 -5px;
}
.text>span:nth-of-type(1) {
margin-left: 0;
}
通过修改html文件来解决
将html中的span全部写在同一行,中间不插入换行符
<p class="text">
<span>H</span><span>e</span><span>l</span><span>l</span><span>o</span>
</p>
通过{display:table;word-spacing:-1em;}来解决
.text {
/* display: block; */
text-align: center;
font-size: 20px;
font-family: monospace;
display: table;
word-spacing: -1em;
width: 100%;
}
.text>span {
margin: 0;
}
- 在行内元素的父元素上设置
{display:table;word-spacing:-1em;}
。 - 1em取决于当前元素的font-size属性的值。
- 需要注意的是此处设置了父元素块元素展示,即父元素占据100%宽度,子元素居中。设置{display:table;}后父元素宽度由子元素内容决定,如果要保持子元素居中需要设置{width:100%;}