Question

I have two lines that have space between them. Like the one below….

 <h2> Something Something <h2>



 <h4> Something here too </h4>

I want it to look like this:

 <h2> Something Something <h2>
 <h4> Something here too </h4>

The space is shown in the browser. I used the tags just to make it clear.

How to reduce the space within the orange rectangle ?

Answer 1

First, ensure that padding and margin on your header elements is 0.

After that, you can adjust their line-height values to get the amount of space you like. Example: http://jsbin.com/afivoq/4/edit

Another option for you! You can apply a negative margin-top on header elements which follow other header elements, like so:

h2 + h4 { margin-top: -20px; }

See the jsbin for updated example.