获取背景颜色以填充整个元素

Question

我不太明白这段代码为什么会这样。如果我这样做...

HTML:

<body>
    <header>
        <h1>
            MY HEADER
        </h1>
    </header>

    <article>
        <p>Lorem ipsum dolor sit amet...</p>
    </article>

    <footer>
        <p>This is my footer</p>
    </footer>
</body>

CSS:

body {
    width: 60%;
    margin: 0 auto;
}

article {
    background: #AAA;
}

footer {
    background: #888;
}


header {
    color: #333;
    background: #0F0;
}

我最终得到了这个：

但是如果我给元素添加边框。

CSS:

body {
    width: 60%;
    margin: 20px auto;
}

article {
    border: 1px solid red;
    background: #AAA;
}

footer {
    border: 1px solid red;
    background: #888;
}


header {
    border: 1px solid red;
    color: #333;
    background: #0F0;
}

我最终得到了这个：

这是为什么？

如何在不添加边框的情况下获得第二个结果？

编辑我终于进行了简单的归一化。

{ 保证金：0； }

我首先想摆脱它，因为我正在构建的页面是为了向一群初学者展示如何制作一个简单的 html/css 页面。而且我认为对于非编码人员来说，如果不陷入这些奇怪的行为，就很难掌握。

Answer 1

我想这可能对你有帮助

h1, p { margin:0; padding: 10px 0; }

Answer 2

默认情况下，大多数 HTML 元素都应用了一些边距。

您可以使用以下行从 CSS 中的所有元素中删除这些内容，最好放在最顶部。

*{margin:0;}

请注意，这将适用于您稍后添加的任何段落（或任何其他内容），最好针对单个元素。

您还可以为每个元素添加高度或填充以给它们留出一点空间，像这样；

<style type="text/css">
*{
    margin:0;
}
    body {
width: 60%;
margin: 0 auto;
}

article {
padding: 3px;
background: #AAA;
}

footer {
  padding: 3px;
background: #888;
}


header {
  padding: 3px;
color: #333;
background: #0F0;
}

祝你好运！

Answer 3

您的 <h1> 和 <p> 标签继承了浏览器默认样式的样式。

您可以找到 around.

由于边距折叠而导致的一些古怪行为

用 Eric Meyers CSS 重置之类的东西对其进行标准化，然后设置所有样式。这将为您可以构建的所有浏览器提供默认设置，并将避免其中一些古怪的浏览器行为。

编辑：其他人做过这样的事情：

Margin on child element moves parent element

Answer 4

原因是 margin collapsing。 margin 指定了元素之间的距离，所以当子元素有 margin 而父元素没有 border 或 padding 之类的东西来包含子元素时，父元素之间将有它们之间的距离。

如果给父元素添加一个overflow设置，也可以达到无边框的效果：

body {
  width: 60%;
  margin: 0 auto;
}

article {
  background: #AAA;
  overflow: hidden;
}

footer {
  background: #888;
  overflow: hidden;
}


header {
  color: #333;
  background: #0F0;
  overflow: hidden;
}

<header>
  <h1>
    MY HEADER
  </h1>
</header>

<article>
  <p>Lorem ipsum dolor sit amet...</p>
</article>

<footer>
  <p>This is my footer</p>
</footer>

另一种方法是将子元素的所有边距设置为零，并改用填充。

获取背景颜色以填充整个元素

Getting background color to fill the entire element

html

css

styling