CODEWITHSUNDEEP
css
xRobot
xRobot

Reputation: 26567

How to eliminate the space after the second line?

This is the code:

#content{width:400px;}
h2{margin:0px;line-height:100px;}

<div id="content">
    <h2>Hello world. Hello world. Hello world. Hello world. Hello world.</h2>
    <span>goodbyeeeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
</div>

See how the code work here

I need a way to put the "goodbyeeeeee.." string 2px below the h2 headline without ( if possible ) using margin with negative numbers ).

Obviously I need also the space between the 2 lines of the h2 headline.

EDIT: I can also avoid to use line-height but I need the space between the 2 lines of the h2 headline.

Upvotes: 0

Views: 133

Answers (3)

ralph.m
ralph.m

Reputation: 14345

If you want the large spacing between the two lines of the h2 but want the span text hugging the bottom of the second line of the h2, you can set the span to display: block to enforce the negative margin:

h2{margin:0px; line-height:100px;}
span{display: block; margin-top:-40px;}

Upvotes: 1

Mr Lister
Mr Lister

Reputation: 46559

I don't think it's possible to change the way line-height behaves. It puts the text of the h2 in the middle of the 100px high line.

So, sorry, but no. Unless you find a way to get rid of the line-height property, you're stuck with using negative margins. Or relative positions.

Edit:
If you do use a negative margin, please put in on the h2 itself, not on any other element that happens to come after it in your current page. The h2 is causing the problem, so that's where you should solve it.

Upvotes: 2

Matthew Graves
Matthew Graves

Reputation: 3284

Setting the height could do it, depending on the situation.

h2{margin:0px;line-height:100px;height: 157px;}

Upvotes: 1

Related Questions