.css reduce gap between <H1> and <P>

Forum Moderators: phranque

Message Too Old, No Replies

.css reduce gap between <H1> and <P>

kapow

10:56 am on Sep 11, 2001 (gmt 0)

Using a .css style sheet - is there a way to remove or reduce the big gap that appears between <H1> and <P> text?

stavs

11:07 am on Sep 11, 2001 (gmt 0)

try this:

h1 {margin-bottom:0em}

stavs

11:18 am on Sep 11, 2001 (gmt 0)

you need a bit more than that:

p {margin-top:0em}
h1{margin-bottom:0em}

Then there should be no gap between the header and the paragraph.

If you want to eliminate the gap after the paragraph as well - use this:

p {margin-top:0em; margin-bottom:0em}
h1{margin-bottom:0em}

hope this helps.

kapow

12:45 pm on Sep 11, 2001 (gmt 0)

Thanks - that worked.

Out of curiosity - Can a specific size of gap be defined?

bobriggs

2:27 pm on Sep 14, 2001 (gmt 0)

I'm sure a lot of people here know that that method doesn't work in NN4 versions. I've wrestled with this one for a long time.

Here is another cross-browser solution that I've come up with.

The above works in NN4. That code should be placed in the page header (<head> </head>) Note- you can leave out the h1 declaration above and put it in the main .css file - I included it here only as the code that NN4 needs to see for the solution.

Then in the external .CSS file, use:

@import url(nons.css);

As the first line (I just used nons.css as a file to indicate NO Netscape. NN4 will ignore this line.

In that file you will have stavs solution:
p {margin-top:0em}
h1{margin-bottom:0em}

This will be read by IE and NN6 and is the correct code.

kapow - size of gap? Try using pixels instead of ems. You might have to play with it a little bit.