删除文本周围的边距

Question

我想删除#header周围的边距。它应该与#content框中的边缘相同。首先，我不明白，为什么#header和#content有不同的边距。

任何指示都表示赞赏

#box {
  background-color: lightgreen;
}

#header {
  background-color: grey;
  float: right;
  width: 150px;
  text-align: center;
  padding: 0;
  margin: 0;
}

#content {
  background-color: lightblue;
  clear: both;
}

<div id="box">
  <div id="header">
    <p>Header</p>
  </div>
  <div id="content">Content</div>
</div>

https://jsfiddle.net/datvLg9r/1/

Answer 1

<p></p>标记有边距，因此您必须为p元素设置margin:0。

Answer 2

这将仅使用id标头定位div中的p元素并删除边距。

 #header p {
    margin: 0;
  }

参见演示https://jsfiddle.net/datvLg9r/1/

Answer 3

按以下方式更新HTML - 删除它将起作用的p元素。

<div id="box">

<div id="header">Header
</div>

<div id="content">Content</div>

</div>