テキストの余白を取り除く

Question

#headerの周りの余白を削除したいと思います。 #contentボックスと同じスリムマージンでなければなりません。最初は#headerと#contentのマージンが異なる理由はわかりません。

任意のポインタを使用すると、p要素のためのmargin:0を設定する必要がありますので

#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>タグは余裕を持って感謝しています。

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>