如何删除背景颜色周围的边距[重复]答案

【问题标题】：How to remove margins around background color [duplicate]如何删除背景颜色周围的边距[重复]
【发布时间】：2020-03-04 12:49:14
【问题描述】：

由于某种原因，下面的代码将输出一个黑色背景，其周围有白色边距。我什至有 margin: 0px 但由于某种原因，边距仍然存在。我试图将所有其他元素设置为 0 边距，但这也不起作用。

.welcome-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #000;
  margin: 0px;
  color: #fff;
}

<section id="welcome-section" class="welcome-section">
  <h1>Hello My name is Ben</h1>
  <p>A Web Developer </p>
</section>

.welcome-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #000;
  margin: 0px;
}

【问题讨论】：

您发布的代码中没有任何内容会导致出现白边。您可能在其他地方有其他影响页面外观的样式规则。
如果您在 chrome devtools 中看到代码，您会发现 margin:8px 给了 <body>，hiren 和 kp86284 给出的答案应该可以完成这项工作。
补充其他人已经说过的 - 许多浏览器呈现某些事物的“默认”值彼此略有不同。在这种情况下，<body> 有一个内置的默认边距。有一些库，比如 normalize.css 试图解决这个问题。 necolas.github.io/normalize.css

标签： html css

【解决方案1】：

使用此代码

body {
    margin: 0;
    padding: 0;
}
.welcome-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #000;
  margin: 0px;
  color: #fff;
}

<section id="welcome-section" class="welcome-section">
    <h1>Hello My name is Ben</h1>
    <p>A Web Developer </p>
  </section>

add in your css :-

body {
    margin: 0;
    padding: 0;
}

【讨论】：

【解决方案2】：

您可以尝试将border: 0 添加到您的样式规则中。听起来“保证金”是指border

页面上的其他内容可能正在设置边框。不过你真的应该分享一个完整的例子。

【讨论】：

【解决方案3】：

试试这个，将此添加到您的 CSS 中

body{
    margin: 0%;
}

它将使背景颜色适合边框。

【讨论】：