Question

这里是codepen： http://codepen.io/anon/pen/ZGwwLW

为什么第一个和第二个字幕之间会出现额外的空格？我可以在不改变HTML结构的情况下摆脱它吗？

这就是我使用的：

<h2>        
    <a href="#" rel="bookmark">Heading</a>
    <br><span class="subtitle">Subtitle 1</span>
    <br><span class="subtitle">March 30, 2015</span>
</h2>

（字幕设置为较小的字体大小。）

Answer 1

不完全确定你在这做什么;

但是..我会删除<br>并使用<li>

构建它

<h2>content</h2>
    <ul>
    <li>content<li>
    <li>content<li>
    </ul>

然后调整您的li { line-height:1.5; }

可能只是一个偏好，但感觉它更好，更灵活。

Answer 2

将行高设置为h2，如http://jsfiddle.net/DIRTY_SMITH/ns3u7uf5/6/

<强> CSS

h2 {
    font-size: 1.625rem;
    line-height: 1.5rem;
}

.subtitle {
    font-size: 1rem;
    font-weight: 400;
    color: #818181;
    line-height: .6rem;
}

Answer 3

接下来，移除<br>并将display:block;添加到.subtitle。

<强> HTML

<h2>        
    <a href="#" rel="bookmark">Heading</a>
    <span class="subtitle">Subtitle 1</span>
    <span class="subtitle">March 30, 2015</span>
</h2>

<强> CSS

.subtitle {
    font-size: 1rem;
    font-weight: 400;
    color: #818181;
    vertical-align: text-top;
    display:block;
}

这是一个codepen：http://codepen.io/anon/pen/qdggXV

Answer 4

如果你改变了

<br><span style="subtitle">...</span>

到

<div style="subtitle">...</div>

它将以您想要的方式工作：Codepen

Answer 5

如果我在第一个字幕末尾的跨度内添加一个额外的空格，例如

<br /><span class="subtitle">Subtitle Text </span>

...它修复了问题（我在Chrome和Safari中看到过，顺便说一句）。这是一个奇怪的解决方案，我不知道它为什么会起作用，但确实如此。

使用不同HTML的解决方案很好，而不是我需要的。

如何删除<h2>的<span>子节点之间的额外空间？

5 个答案: