So what's the deal with the space above and below H1 tags

I've noticed that the browsers put a lot of space above and below H1 tags. Does anyone know how to control the amount of space above and below the h1 tags?

 

learn css

h1 {
padding: 0;
margin: 0;
}

space gone.

 

You can remove those spaces and even the 'line break' using CSS

Margin: 0px;
to remove space

and

Display: inline;
to remove the 'line break'

EDIT:
Man - beat to the punch

 

margin-bottom: 0

(edit: damn you guys are fast)

 

want to take it a step further? save the following as undohtml.css
and import it into all of you style sheets by using this

@import URL (undohtml.css);

Code (markup):

in the beggining of all style sheets you create. this css removes most of the more common browser defaults that are annoying. the only downside is yyou have to set your own styles for all the things this undoes, but it make it easier than trying to figure out hacks and work arounds that are not cross browser compatable.

undohtml.css:

a:link,a:visited { text-decoration:none }

ul,ol { list-style:none }

h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input, dl, dd, dt
{ margin:0; padding:0 }

a img,:link img,:visited img { border:none }

Code (markup):

 

Thanks everyone...

SVC why did you put the padding style in there?

 

*shrug* i just do both. some browsers are extra gay.

 

jrd1mra that's brilliant. thank you very much.

 

SVC you're a trip dude.

 

same here. It is the right way technically.

 

Just a thought on that undohtml idea which Tantek Celik first published about 18 months ago, I think.
If you use the star "hack" - well it's not actually a hack, there are several declarations you don't need to worry about and that will reduce the size of your css file.
For instance:

* {padding: 0; margin: 0; border: 0;}

Code (markup):

At the top of the css file, this has the effect of negating all the defaults the various browsers "choose" to place on elements, like, but not restricted to, the H1 tags. It saves you having to apply zero paddings/margins/borders throughout your css file. Of course, when your design calls for some margins/padding/border you only have to apply them to the elements that need them. Outcome - a more efficient CSS file.

Now, the word on the street is that IE7 may/will not recognize the * html and * html, body hacks. These are true hacks and different animals altogether than * {code} without the html or html, body bits.

 

so you are saying that putting * {padding:0; margin:0; border:0;} will have the same effect as importing the undohtml.css? What about font size? and also list style annoyances that the undohtml.css addresses. Plus not all browsers recognize a declaration that begins with a universal selector.

 

No, I'm not saying it will replace the undohtml code. But it will negate the long list of stuff with padding:0; and margin:0; and bits and pieces like image borders.
I know there are some browser problems with universal child/descendant selectors,
http://www.w3.org/TR/REC-CSS2/selector.html#universal-selector
but I did not know that some browsers do not recognize this (top of DOM as it were) universal selector. I've done a bit of Google-ing but to no avail. Could I ask you to name the browsers that do not go along with this, 'cos I'm still learning? TIA.

 

The * {padding:0; margin:0; border:0;} method does a great job of removing any default margins and padding from various objects. the downside to this is that you will need to stylize all the objects such as ul, ol, etc., etc. So it really jsut boils down to a matter of preference.

As for child selectors, a selector like * #beer {} would not be wise to use (due to browser issues), but you can use #beer * {} without any issues.

 

* #beer should always be valid, since html is the root element, and #beer must descend from something. * html is different because html is the root element, and is not descended from anything. IE has a mystery wrapper from which html descends. This is considered to be a bug, and IE7 has fixed it. Modern browsers have never recognized the construct.

cheers,

gary