Удалить margin around text

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> Tag есть запас, так что вы должны установить margin:0 для элемента р.

Answer 2

Этот объект предназначен только для элемента p внутри div с заголовком id и удаляет его.

#header p { 
    margin: 0; 
    } 

см демонстрационная https://jsfiddle.net/datvLg9r/1/

Answer 3

обновления HTML как последуйте - удалить элемент р он будет работать.

<div id="box"> 

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

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

</div>