CODEWITHSUNDEEP
htmlcss
G.Hamton
G.Hamton

Reputation: 61

Remove invisible margin between div tags

for some reason I can't work out why it's doing this but my div tags have a small clear margin between each one making the div tags not but up to each other. Anyone have an idea where I'm going wrong here?

Thanks.

body {
  background-color: #E8E8E8;
}
#content {
  width: 80%;
  margin-left: 10%;
}
#header {
  background-color: #4C66A4;
}
#mainBody {
  background-color: #FFF;
}
#footer {
  background-color: #4C66A4;
}
<body>
  <div id="content">
    <div id="header">
      <p>header</p>
    </div>
    <div id="mainBody">
      <p>body</p>
    </div>
    <div id="footer">
      <p>footer</p>
    </div>
  </div>
</body>

Upvotes: 1

Views: 918

Answers (3)

prtdomingo
prtdomingo

Reputation: 981

Because browsers automatically add some margin before and after each <p> element, you need to set the <p> margin into 0 (zero) like this:

body {
  background-color: #E8E8E8;
}
#content {
  width: 80%;
  margin-left: 10%;
}
#header {
  background-color: #4C66A4;
}
#mainBody {
  background-color: #FFF;
}
#footer {
  background-color: #4C66A4;
}

#mainBody > p, #header > p, #footer > p {
  margin: 0; /*set all <p> elements inside the div id of #mainBody, #header and #footer into margin: 0*/ 
}
<body>
  <div id="content">
    <div id="header">
      <p>header</p>
    </div>
    <div id="mainBody">
      <p>body</p>
    </div>
    <div id="footer">
      <p>footer</p>
    </div>
  </div>
</body>

Upvotes: 0

xfactor11
xfactor11

Reputation: 11

add p {margin: 0px;}

body {
  background-color: #E8E8E8;
}
#content {
  width: 80%;
  margin-left: 10%;
}
#header {
  background-color: #4C66A4;
}
#mainBody {
  background-color: #FFF;
}
#footer {
  background-color: #4C66A4;
}
p {
margin: 0px;
}
<body>
  <div id="content">
    <div id="header">
      <p>header</p>
    </div>
    <div id="mainBody">
      <p>body</p>
    </div>
    <div id="footer">
      <p>footer</p>
    </div>
  </div>
</body>

Upvotes: 0

Aer0
Aer0

Reputation: 3907

Just remove the p elements default margin.

p {
  margin: 0;
}

Upvotes: 1

Related Questions