Why do the <p> and <h1> elements cause gaps in my layout?

Answer 1

By default <p> and <h2> (among others) have margins and paddings associated with them. Trying adding the following to your CSS:

p, h2 {
  margin: 0px;
  padding: 0px;
}

Having padding won't affect the border and background of the elements, but depending on what you want, you might want to try removing them as well as I do here.

Edit: as Guffa pointed out in an answer below, the reason that the margins of the paragraph and heading are reaching outside their container DIVs is due to collapsing margins.

Answer 2

Have you tried a css reset before adding your own css?

Answer 3

To avoid situations like this, use something like YUI Reset. It sets the default CSS to something predictable across browsers.

Answer 4

I (usually) start every CSS file with the following to avoid getting caught by auto-padding/margins:

*
{
   margin-top: 0;
   margin-right: 0;
   margin-bottom: 0;
   margin-left: 0;
   padding-top: 0;
   padding-right: 0;
   padding-bottom: 0;
   padding-left: 0;
}

edit for clarity:

*
{
   margin: 0;
   padding: 0;
}

does the same thing.

Answer 5

That is because of collapsing margins. Margins aren't something that surround a single element, like padding. Instead the margin determines the distance between elements. If the parent element doesn't have margin or padding (like the div elements in your code), the margin of the child elements (h2 and p) determine the distance between the parent elements rather than the child elements.

For now you should generally avoid collapsing margins when the parent elements have a background set, as IE (at least up to version 7) doesn't handle collapsing margins correctly.

If you just set some padding on your div elements (it looks like you should have that anyway), the margins won't collapse outside them.

Answer 6

The problem is because of the collapsing margins. The margins on the h1 and p elements are contributing to the margins of the main div. You can fix this by either removing the margins on these elements:

h1,p { margin: 0; }

or by adding a border or padding to the div:

#main { padding: 1px; }

Also make sure your HTML is well-formed, you have a stray </a> in your sample.