消除HTML主体元素之间的差距

Question

在body元素内部，我在其子元素之间找到了不可变的边距。我做了一个codepen示例来帮助解释我的问题，http://codepen.io/Krail/pen/gbGWad。

HTML

<!-- Case 1 -->
<header><p>HeaderParagraph1</p></header>
<main><p>MainParagraph1</p></main>
<footer><p>FooterParagraph1</p></footer>

<!-- Case 2 -->
<p id="head">HeaderParagraph2</p>
<p id="main">MainParagraph2</p>
<p id="foot">FooterParagraph2</p>

CSS

body {background-color: grey; border-width: 0; margin: 0; padding: 0}

/* Case 1 */
header {background-color: yellow; border-width: 0; margin: 0; padding: 0}
main {background-color: orange; border-width: 0; margin: 0; padding: 0}
footer {background-color: pink; border-width: 0; margin: 0; padding: 0}

/* Case 2 */
p#head {background-color: yellow; border-width: 0; margin: 0; padding: 0}
p#main {background-color: orange; border-width: 0; margin: 0; padding: 0}
p#foot {background-color: pink; border-width: 0; margin: 0; padding: 0}

案例1是我的问题的一个例子。案例2是我期望的效果。

对此处的html原则的任何见解将不胜感激。感谢。

Answer 1

<p>在浏览器中有标准余量。您可以将它们设置为margin:0;

Answer 2

除了header { ... }执行header p { ... }以外，每个人都有：

header p {background-color: yellow; border-width: 0; margin: 0; padding: 0}
main p {background-color: orange; border-width: 0; margin: 0; padding: 0}
footer p {background-color: pink; border-width: 0; margin: 0; padding: 0}

以下是codepen示例。