HTML 如下:
<p> <span>hello</span> <span>world</span></p>
CSS 代码:
span { display:inline-block; 100px; background:#36c; color:#fff; font-size:30px; text-align:center;}
在页面上他们之间会有一个空格的间隔,我知道只要移除他们之间的空格就显示正常了:
<p> <span>hello</span><span>world</span></p>
但我想知道如何在不修改 HTML、不使用 JS 的情况下,有没有通过修改 CSS 来解决的方法?
这个原因跟字体类型和大小有关系。
雅虎 YUI 的解决方法是把letter-spacing和word-spacing改成某个负值能解决(不同的字体值不同),ytzong 给了个一劳永逸的解决方法,直接写成 -.5em 或者更大 http://www.99css.com/archives/690
.span { letter-spacing:-.5em;/* webkit: collapse white-space between units */ *letter-spacing:normal;/* reset IE < 8 */ word-spacing:-.5em;/* IE < 8 && gecko: collapse white-space between units */}
我个人更喜欢通过修改父元素的字体大小,将大小设置为font-size: 0来解决:
p { font-size:0;}