remove space between lines, single page only

Question

I want to remove the extra space between lines, but only for this part. Not on any other page. Basically I want the line starting with -- to appear directly under the text above it. I do need the padding for the tag to remain as well. I'm guessing this would be done via a class id, but not sure of the css code that I would use. Margin? Something along the lines of

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

Just put a break in you h3? And then set the line height to e.g. 0.9em — Martijn, Feb 22 '18 at 21:08

dippas · Answer 1 · 2018-02-22T21:20:29.653

2

You can use span inside h3 for that and set it display:block and avoid all that extra markup

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>

Even LESS MARKUP just set 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>

edited Feb 22 '18 at 21:20

answered Feb 22 '18 at 21:11

dippas

58,591
15
114
126

This is exactly the same as my answer now. – adprocas Feb 22 '18 at 21:24
I have 2 options, in my answer, so no, not the same as your answer – dippas Feb 22 '18 at 21:28
Ah, I missed the other code snippet. The only one displaying is the same as mine. But thanks for taking my answer and adding it to yours, haha. I also added another answer. You can add two. I think there's benefit in not turning inline elemnts into blocks. – adprocas Feb 22 '18 at 21:34
for the part of inline into block read this [answer](https://stackoverflow.com/questions/37853141/is-changing-default-display-property-a-good-practice/37908116#37908116) – dippas Feb 22 '18 at 21:37

score 2 · Answer 2 · answered Feb 22 '18 at 21:11

You're on the right track with margin Might be cleaner to do this another way with div wrappers and spans, but if you want to change the h3 tags you can do it like this:

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>

I agree. Your answer with the spans would be much better – abney317 Feb 22 '18 at 21:15 — abney317, Feb 22 '18 at 21:15

score 1 · Accepted Answer · answered Feb 22 '18 at 21:17

1

To keep it kind of similar to what you have, you can do this. There's no need to have two <h3>'s in there.

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>

answered Feb 22 '18 at 21:17

adprocas

1,863
1
14
31

This seems the easiest of all answers and works perfectly. Thanks!! – Brad Anderson Feb 22 '18 at 22:19
@BradAnderson LOOL apparently you didnt read read my answer at all – dippas Feb 22 '18 at 22:28
@dippas I read every answer. Strictly guessing, your answer may not have been edited at the time I found the one from adpro. Next time I will leave a comment immediately instead of taking the time to get my page working correctly first. I appreciate everyone's help, the questions I have asked have assisted me in understanding things a bit better. – Brad Anderson Feb 22 '18 at 23:56
@BradAnderson, thank you. They're both very similar answers, but yes, mine existed before his edit. It still feels odd to me to make an inline element a block element, but it seems, after looking into it a bit further, it's acceptable. – adprocas Feb 23 '18 at 13:17

score 0 · Answer 4 · answered Feb 22 '18 at 21:13

You want to create a reusable class (IDs have little practical use in CSS) which you can apply as you like:

h3.snug {
    margin: 0;
}

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

Alternatively, apply a class to a wrapper element on the page:

.snug h3 {
    margin: 0;
}

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

score 0 · Answer 5 · answered Feb 22 '18 at 21:33

Some of this depends on what content you are displaying. Since you said it won't be the same everywhere, I've added a class, and added sections. If this is kind of its own section you could just wrap it all in a section. You could also throw a div with a class container or something like that as well for the padding. I would assume you probably have more HTML on the page, so something else might make more sense. I've also added a <p> tag, because "css purests" might not be cool with turning those inline elements into block elements.

So, here's a solution that has some other benefits, depending on what your specific needs are. This is more HTML5 friendly.

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>

remove space between lines, single page only

5 Answers5