html - 强元素有空格修复

Question

我有以下 html 代码。

<div class="box extend">
    <h1>CLOUD SERVICES FOR SMALL BUSINESS</h1>
    <figure><img src="myimg.png" /></figure>
    <p>
        <strong>Hosted Exchange Server</strong>
        <strong>Cloud Server Solutions</strong>
        <strong>Backup Servicesd Server Solution</strong>
    </p>
</div>

和上面html的css(更新的css)

.box p strong{
    font-weight: 700;
    font-size: 20px;
    color: red;
    padding: 0px;
    margin: 0px;
    background: blue;
}

现在的问题是 strong 元素之间有空格，因为它不应该(基于我的 css 设置)，请引用下图

无论如何我可以进行突袭或消除彼此元素之间的空间差距吗？任何建议，建议和想法，我很想听听!提前谢谢你。

Answer 1

似乎让它们显示 block 会杀死细线

http://jsfiddle.net/5qqLR/2/

.box p strong{
    font-weight: 700;
    font-size: 20px;
    color: red;
    padding: 0px;
    margin: 0px;
    background: blue;
    display: block;
}

进一步研究后将父行高设置为 1 将解决此问题

http://jsfiddle.net/5qqLR/3/

.box p {
    line-height: 1;
}

看这里http://www.sitepoint.com/forums/showthread.php?824112-space-below-inline-elements-inside-a-block-element