随机 15px 边距？

Question

我得到随机的 15px 顶部和底部边距，但我不知道它们来自哪里。

这种情况在 IE 中不会发生，只有 FF 和 Chrome 才会发生。

在以下示例中，每个“Here is content”段落上方和下方的间距是意外的。

#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

如果您谈论的是每个

标记周围的边距，那么这是用户代理样式表固有的。
默认情况下，段落标签有一个周围的边距。如果您执行以下操作：

p { margin: 0; padding: 0; }

您应该能够摆脱边距/填充。

Answer 2

段落默认为 1em 垂直边距（顶部和底部，但它们可以重叠）。我猜你说的是 div 有下边距 - 但事实并非如此，那是它下面的 p 的上边距。

Answer 3

现在您添加了测试图像，我知道您的意思。

使用此 CSS 可以解决此问题：

p { margin: 0; padding: 16px 0 }

简而言之，使用 padding 而不是 margin 在段落之间提供相同的间距。

Answer 4

删除内容正文 css 上的 --moz-border-radius: 0 0 10px 10px; 命令并使用
边距：0 像素；根据您的内容进行填充。它会起作用，这就是声誉的原因。在mozila浏览器中使用firebug我们可以轻松找到错误。

Answer 5

您的问题似乎已经解决，但您可能想开始使用 CSS 重置来覆盖所有内容的用户代理样式表内容。使您的网页样式变得更容易，使它们在大多数浏览器上看起来都相同。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}