Question

出于某种原因，我无法解决为什么它会这样做，但我的div标签在每个标签之间有一个小的明显边距，使得div标签不是彼此之间。任何人都知道我在这里出错了吗？

感谢。

＆＃13;

body {
  background-color: #E8E8E8;
}
#content {
  width: 80%;
  margin-left: 10%;
}
#header {
  background-color: #4C66A4;
}
#mainBody {
  background-color: #FFF;
}
#footer {
  background-color: #4C66A4;
}

＆＃13;

<body>
  <div id="content">
    <div id="header">
      <p>header</p>
    </div>
    <div id="mainBody">
      <p>body</p>
    </div>
    <div id="footer">
      <p>footer</p>
    </div>
  </div>
</body>

＆＃13;

Answer 1

只需删除p元素的默认边距。

doSomethingElse

Answer 2

添加p {margin：0px;}

＆＃13;

body {
  background-color: #E8E8E8;
}
#content {
  width: 80%;
  margin-left: 10%;
}
#header {
  background-color: #4C66A4;
}
#mainBody {
  background-color: #FFF;
}
#footer {
  background-color: #4C66A4;
}
p {
margin: 0px;
}

＆＃13;

<body>
  <div id="content">
    <div id="header">
      <p>header</p>
    </div>
    <div id="mainBody">
      <p>body</p>
    </div>
    <div id="footer">
      <p>footer</p>
    </div>
  </div>
</body>

＆＃13;

Answer 3

由于浏览器会在每个<p>元素之前和之后自动添加一些边距，因此您需要将<p>边距设置为 0 （零），如下所示：

body {
  background-color: #E8E8E8;
}
#content {
  width: 80%;
  margin-left: 10%;
}
#header {
  background-color: #4C66A4;
}
#mainBody {
  background-color: #FFF;
}
#footer {
  background-color: #4C66A4;
}

#mainBody > p, #header > p, #footer > p {
  margin: 0; /*set all <p> elements inside the div id of #mainBody, #header and #footer into margin: 0*/ 
}

<body>
  <div id="content">
    <div id="header">
      <p>header</p>
    </div>
    <div id="mainBody">
      <p>body</p>
    </div>
    <div id="footer">
      <p>footer</p>
    </div>
  </div>
</body>

删除div标签之间的隐形边距

3 个答案: