random 15px margins?

Question

I am getting random 15px top and bottom margins and I have no idea where they are coming from.

This is not happening in IE, only FF and Chrome.

In the following sample, the spacing above and below each "Here is content" paragraph was unexpected.

#pageContent {
    background-color: #fff;
    padding: 10px;
}

#contentHead {
    height: 33px;
    width: 882px;
    color: black;
    font-size: 14px;
    font-weight: bold;
    line-height: 34px;
    padding-left: 48px;
    text-transform: uppercase;
}

#contentBody{
    background-color: #d4d3d1;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    -moz-border-radius: 0 0 10px 10px;
    border: 1px solid #8b8b8b;
}

#contentNoSidebar{
    background-color: #000;
    color: white;
}

<div id="pageContent">
  <div id="contentHead">Sample Page</div>
  <div id="contentBody">
    <div id="contentNoSidebar">
      <p>Here is content</p>
      ...
      <p>Here is content</p>
    </div>
  </div>
</div>

Answer 1

If you're talking about the margins surrounding each <p> tag, that is inherent from the user agent style sheet. By default paragraph tags have a surrounding margin. If you do something like:

p { margin: 0; padding: 0; }

you should be able to get rid of the margin/padding.