CODEWITHSUNDEEP
htmlcss
Lalit Pal
Lalit Pal

Reputation: 310

How to remove white space between div elements

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>

Upvotes: 6

Views: 24017

Answers (6)

Sagi Levi
Sagi Levi

Reputation: 305

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;
}

Upvotes: 2

Paran0a
Paran0a

Reputation: 3447

h1, h2, p {
    margin: 0;
}

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

Upvotes: 8

Kristijan Iliev
Kristijan Iliev

Reputation: 4987

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>

Upvotes: 4

George Vasilopoulos
George Vasilopoulos

Reputation: 83

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>

Upvotes: 3

Per Salbark
Per Salbark

Reputation: 3645

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.

Upvotes: 2

Collins Abitekaniza
Collins Abitekaniza

Reputation: 4578

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>

Upvotes: 2

Related Questions