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;
}

我最终得到了这个： enter image description here

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

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;
}

我最终得到了这个： enter image description here

为什么会这样？

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

修改我终于进行了简单的规范化。

{ 保证金：0; }

我首先想摆脱这一点，因为我正在构建的页面是为了向一群初学者展示如何创建一个简单的html / css页面。我认为非编程人员很难掌握，而不会陷入这些奇怪的行为。

Answer 1

默认情况下，大多数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 2

我认为这可能对你有帮助

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

Answer 3

您的<h1>和<p>代码已从浏览器的默认样式继承了样式。

由于您可以找到around的边距折叠，因此存在一些古怪的行为。

使用Eric Meyers CSS重置等标准化它，然后设置样式。这将为您可以构建的所有浏览器提供默认设置，并将避免这些奇怪的浏览器行为。

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

Margin on child element moves parent element

Answer 4

原因是margin collapsing。边距指定元素之间的距离，因此当子元素具有边距并且父元素没有包含子元素的边框或填充之类的内容时，父元素将具有它们之间的距离。

如果您向父元素添加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>

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

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

4 个答案: