强元素有空格修复

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;
}

现在问题是强元素之间有空格，据说它不应该（基于我的css设置），请参考下面的图片

无论如何我可以进行突袭或移除彼此之间的空隙吗？任何建议，建议和想法，我很乐意听到！提前谢谢你。

Answer 1

似乎让它们显示块杀死了细线

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