css - 删除文本周围的边距

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>标签有边距，所以你必须设置 margin:0对于 p 元素。