CODEWITHSUNDEEP
htmlcss
Brad Anderson
Brad Anderson

Reputation: 141

remove space between lines, single page only

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

Upvotes: 0

Views: 111

Answers (5)

adprocas
adprocas

Reputation: 1913

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>

Upvotes: 0

dippas
dippas

Reputation: 60563

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>

Upvotes: 2

adprocas
adprocas

Reputation: 1913

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>

Upvotes: 1

isherwood
isherwood

Reputation: 61083

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>

Upvotes: 0

abney317
abney317

Reputation: 8492

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>

Upvotes: 2

Related Questions