刪除文字邊緣

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>