我想知道如何在不修改 HTML、不使用 JS 的情况下，有没有通过修改 CSS 来解决的方法？

Question

HTML 如下：

<p>
    <span>hello</span>
    <span>world</span></p>

CSS 代码：

span { 
    display:inline-block;    width:100px;    background:#36c;    color:#fff;    font-size:30px;    text-align:center;
}

在页面上他们之间会有一个空格的间隔，我知道只要移除他们之间的空格就显示正常了：

<p>
    <span>hello</span><span>world</span></p>

Answer 1

移除代码之间的空白、换行 这样不行吗？<p><span>hello</span><span>world</span></p>

Answer 2

这个原因跟字体类型和大小有关系。.span&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;letter-spacing:&nbsp;-.5em;&nbsp;/*&nbsp;webkit:&nbsp;collapse&nbsp;white-space&nbsp;between&nbsp;units&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;*letter-spacing:&nbsp;normal;&nbsp;/*&nbsp;reset&nbsp;IE&nbsp;<&nbsp;8&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;word-spacing:&nbsp;-.5em;&nbsp;/*&nbsp;IE&nbsp;<&nbsp;8&nbsp;&&&nbsp;gecko:&nbsp;collapse&nbsp;white-space&nbsp;between&nbsp;units&nbsp;*/}我个人更喜欢通过修改父元素的字体大小，将大小设置为font-size: 0来解决：p&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;0; }