Remove margin around text

Question

I want to remove the margin around a #header. It should be the same slim margin as in the #content box. In the first place, I do not understand, why #header and #content have different margins.

Any pointers are appreciate

#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/

Possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Banzay, Feb 18 '17 at 16:43

score 1 · Accepted Answer · answered Feb 18 '17 at 16:43

1

<p></p> Tag have margin so you have to set margin:0 for p element.

answered Feb 18 '17 at 16:43

Mohit Yadav

433
8
17

score 0 · Answer 2 · answered Feb 18 '17 at 16:48

0

This targets the p element within the div with id header only and removes the margin.

 #header p {
    margin: 0;
  }

see demo https://jsfiddle.net/datvLg9r/1/

answered Feb 18 '17 at 16:48

Raymond Nijland

11,193
2
18
32

score 0 · Answer 3 · answered Feb 18 '17 at 16:49

0

update HTML as follow - remove p element it will work.

<div id="box">

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

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

</div>

answered Feb 18 '17 at 16:49

jjj

1,128
3
17
27

Remove margin around text

3 Answers3