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

您可以在span内使用h3并将其设置为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

中设置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包装器和跨度可能更干净，但是如果你想改变h3标签你可以这样做：

＆＃13;

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

＆＃13;

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

＆＃13;

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>标记，因为＆＃34; css purests＆＃34;将这些内联元素转换为块元素可能并不酷。

所以，这是一个具有其他一些好处的解决方案，具体取决于您的具体需求。这更适合HTML5。

＆＃13;

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

＆＃13;

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

＆＃13;

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

5 个答案: