Geek Answers Handbook

Header fields not specified anywhere

I have a strange problem. I have a simple web page and for some reason the <h1 /> has margin-top and margin-bottom more than 18 pixels. There is nothing in my * .css file that points to this. Firefox Firebug shows me the style that applies, but there is no margin.

In the div figure, that the title text is (or should be in it) has limitations. But the title text is pushed down due to the field.

What could be the reason for this? Is there somewhere in firefox / firebug that can show me EXACTLY where this style came from? It says that the header tag is inherited from the body style, but this is only true:

 body { font-size: .85em; font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif; color: #232323; background-color: #fff; }

Any ideas? Thanks in advance.

enter image description here

+4
source share
4 answers

By default, headers often have margins. Look at using the reset / normalization stylesheet.

Reset or normalization style sheets reset your styles to the standard baseline in all browsers. The difference between reset and normalization is the reset of clear margins, indentation, etc., where reasonable defaults are applied in the normalization style sheets.

These links should be useful:

+6
source

This is the default style for <h1> s. It looks like <h1> has a larger text size than paragraphs. This is just the default. It can also be overwritten.

+1
source

Most browsers add default margin and padding .

Try resetting margin e.g.

 body{ font-size: .85em; font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif; color: #232323; background-color: #fff; margin:0; /* ADD THIS */ }

You can also reset to h1

+1
source

All browsers have CSS by default, which applies to all pages.

Use something like Yahoo Reset CSS to undo any applicable styles.

+1
source

More articles:


All Articles