删除文字边缘

Question

我想删除#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元素。

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>