How to remove white space between div elements

Question

I created a web page with 3 div tags with some content in each div and with background colors set to the div elements I found some white space appearing between the div elements. I have tried a lot to remove these white space using various properties like outline, margin, padding etc, but I failed. I want to remove white spaces between my div without using 'float' property. webpage snapshot

<!DOCTYPE html>
<html>
<head>
<style>
body
{
    margin:0px;
    background-color:green;
}
.container
{
    margin-top:0px;
    margin-bottom:0px;
    margin-left:10%;
    margin-right:10%;
}
.head
{
    background-color:gray;
}
.nav
{
    background-color:blue;
}
.content
{
    background-color:lime;
}
</style>
</head>
<body>
<div class="container">
    <div class="head">
        <h1>Welcome to my page!</h1>
    </div>
    <div class="nav">
        <h2>some text</h2>
    </div>
    <div class="content">
        <p>Some text in content</p>
    </div>
</div>
</body>
</html>

Possible duplicate of [How to remove margin space around body or clear default css styles](http://stackoverflow.com/questions/9547291/how-to-remove-margin-space-around-body-or-clear-default-css-styles) — Alex, Dec 01 '15 at 09:32

score 8 · Accepted Answer · edited Dec 01 '15 at 10:04

8

h1, h2, p {
    margin: 0;
}

Browser adds margins on heading elements and paragraphs by default. You remove it via CSS.

edited Dec 01 '15 at 10:04

giliev

2,938
4
27
47

answered Dec 01 '15 at 09:29

Paran0a

3,359
3
23
48

score 4 · Answer 2 · edited Dec 01 '15 at 09:35

The space between your divs is because of default h and p elements's margins. I added just this css rule to override default margins:

h1, h2, p{
  margin: 0;
}

Please check this snippet:

body{
    margin:0px;
    background-color:green;
}
.container{
    margin-top:0px;
    margin-bottom:0px;
    margin-left:10%;
    margin-right:10%;
}
.head{
     background-color:gray;
}
.nav{
    background-color:blue;
}
.content{
    background-color:lime;
}
h1, h2, p{
  margin: 0;
}

<body>
<div class="container">
    <div class="head">
        <h1>Welcome to my page!</h1>
    </div>
    <div class="nav">
        <h2>some text</h2>
    </div>
    <div class="content">
        <p>Some text in content</p>
    </div>
</div>
</body>

score 3 · Answer 3 · answered Dec 01 '15 at 09:33

The h1, h2, p tags have by default a margin underneath them. You can achieve the desired effect by using a negative margin in the containing divs or the tags themselves

(I do not recommend the latter like most other answers do, as it will affect every h1, h2, p tags in your page)

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin: 0px;
      background-color: green;
    }
    .container {
      margin-top: 0px;
      margin-bottom: 0px;
      margin-left: 10%;
      margin-right: 10%;
    }
    .head {
      background-color: gray;
      margin-bottom: -21px;
    }
    .nav {
      background-color: blue;
      margin-bottom: -21px;
    }
    .content {
      background-color: lime;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="head">
      <h1>Welcome to my page!</h1>
    </div>
    <div class="nav">
      <h2>some text</h2>
    </div>
    <div class="content">
      <p>Some text in content</p>
    </div>
  </div>
</body>

</html>

score 2 · Answer 4 · answered Dec 01 '15 at 09:31

The white space is caused by the margins on your h1,h2,and p tags, try setting the margins to 0 like

h1,h2,p{
  margin:0px;
  }

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin: 0px;
      background-color: green;
    }
    .container {
      margin-top: 0px;
      margin-bottom: 0px;
      margin-left: 10%;
      margin-right: 10%;
    }
    .head {
      background-color: gray;
    }
    .nav {
      background-color: blue;
    }
    .content {
      background-color: lime;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="head">
      <h1>Welcome to my page!</h1>
    </div>
    <div class="nav">
      <h2>some text</h2>
    </div>
    <div class="content">
      <p>Some text in content</p>
    </div>
  </div>
</body>

</html>

score 2 · Answer 5 · answered Dec 01 '15 at 09:32

The margin on the header tags are rendered outside the containing <div>.

Believe it or not, but this is by design. If anyone cares to elaborate on why CSS works like this I would like to hear it. I've been working as a web-designer for 10+ years and I still make this mistake sometimes because it is so unintuitive to me.

score 2 · Answer 6 · edited Dec 01 '15 at 10:12

2

You problem is caused by margin on the h1,h2 and p and not on the divs, therefore all you need to do is remove those margins. as you can see in this link

h1, h2, p {
    margin:0;
}

edited Dec 01 '15 at 10:12

giliev

2,938
4
27
47

answered Dec 01 '15 at 09:33

Sagi Levi

305
1
11

How to remove white space between div elements

6 Answers6