删除行之间的空间，仅单页

Question

我想删除行之间的多余空间，但仅此部分。 不在任何其他页面上。 基本上，我希望以-开头的行直接显示在其上方的文本下方。 我确实需要保留标签的填充。 我猜想这将通过一个类ID完成，但不确定我将使用的CSS代码。 余量？ 遵循以下原则

<h3 class="removeSpace">

的HTML

<h3><em>Some text here</em></h3><h3> – blah blah blah</h3>
<h3><em>Other text here</em></h3><h3> – yadda yadda yadda</h3>
<h3><em>More text here</em></h3><h3> – blah blah blah</h3>

的CSS

h3 {
    color: #7093DB;
    padding-left: 300px;
}

Answer 1

您可以在h3内使用span并将其设置为display:block并避免所有额外的标记

 h3 { color: #7093DB; padding-left: 300px; } h3 span { display: block } 

 <h3><em>Some text here </em> <span>– blah blah blah</span></h3> <h3><em>Some text here </em> <span>– blah blah blah</span></h3> <h3><em>Some text here </em> <span>– blah blah blah</span></h3> 

甚至LESS MARKUP都只设置display:block in em

 h3 { color: #7093DB; padding-left: 300px; } h3 em { display: block } 

 <h3><em>Some text here </em> – blah blah blah</h3> <h3><em>Some text here </em> – blah blah blah</h3> <h3><em>Some text here </em> – blah blah blah</h3> 

Answer 2

您的margin在正确的轨道上可能更干净一些，可以使用div包装器和spans进行此操作，但是，如果您想更改h3标签，可以这样做：

 h3 { color: #7093DB; padding-left: 300px; } .removespace { margin-bottom: 0; } .child { margin-top: 0; } 

 <h3 class="removespace"><em>Some text here</em></h3><h3 class="child"> – blah blah blah</h3> <h3 class="removespace"><em>Other text here</em></h3><h3 class="child"> – yadda yadda yadda</h3> <h3 class="removespace"><em>More text here</em></h3><h3 class="child"> – blah blah blah</h3> 

Answer 3

要使其与您拥有的相似，可以执行此操作。 那里不需要两个<h3> 。

 h3 { color: #7093DB; padding-left: 300px; } h3 em { display: block; } 

 <h3><em>Some text here</em> – blah blah blah</h3> <h3><em>Other text here</em> – yadda yadda yadda</h3> <h3><em>More text here</em> – blah blah blah</h3> 

Answer 4

您想要创建一个可重用的类（ID在CSS中几乎没有实际用途），可以根据需要应用该类：

h3.snug {
    margin: 0;
}

<h3 class="snug"> ... </h3>

或者，将一个类应用于页面上的包装器元素：

.snug h3 {
    margin: 0;
}

<div class="snug">
    <h3> ... </h3>
</div>

Answer 5

其中一些取决于您要显示的内容。 既然您说过遍地不一样，所以我添加了一个类，并添加了部分。 如果这是它自己的部分，则可以将其全部包装在一个部分中。 您还可以将div与类容器或类似的东西一起用于填充。 我认为您可能在页面上有更多的HTML，所以其他一些事情可能更有意义。 我还添加了一个<p>标记，因为“ css purests”可能无法将那些内联元素转换为块元素。

因此，根据您的特定需求，这是一种具有其他好处的解决方案。 这对HTML5更友好。

 section.some-section { padding-left: 300px; } section.some-section h3 { color: #7093DB; } section.some-section p { margin: 0; } 

 <section class="some-section"> <h3><em>Some text here</em> <p>– blah blah blah</p></h3> </section> <section class="some-section"> <h3><em>Other text here</em> <p>– yadda yadda yadda</p></h3> </section> <section class="some-section"> <h3><em>More text here</em> <p>– blah blah blah</p></h3> </section>