Question

由于某种原因，下面的代码将输出黑色背景，周围带有白色边距。我什至有margin：0px，但是由于某些原因，margin仍然存在。我试图将所有其他元素设置为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;
}

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

Answer 2

您可以尝试将border: 0添加到样式规则中。听起来像是“ {margin”，意思是border

页面上的其他内容可能正在设置边框。您确实应该分享一个完整的例子。

Answer 3

尝试一下，将此添加到您的CSS

body{
    margin: 0%;
}

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

如何删除背景色周围的边距

3 个答案: