White space between two vertical divs... How to remove it?

Question

Hi i am having trouble with removing the white space between header and content, which are in div tags. I tried lots of things that i searched in google and other tutorials but cant find the solution. Any help would be appreciated.

Here is my code:

/*--------------general-----------------*/
body {
 margin: 0;
 padding: 0;
}

/*------------header--------------------*/

#header {
 background-color: #d4e6d5;
 display: block;
 margin-bottom: 0;
 padding-bottom: 0;
}

#header #navigation {
 width: 1100px;
 background-color: red;
 margin-left: 133px;
 
}

#navigation ul {
 list-style: none;
 width: 685px;
 margin-left: 173px;
}

#navigation #nav-meny {
 display:inline-block;
 border:solid;
 border-bottom: none;
}

#navigation li a{
 text-decoration: none;
 display: inline-block;
 padding: 20px;
 padding-left: 40px;
 padding-right: 40px;
 color: black;
 font-size: 16px;
 font-weight: bold;
 background-color: teal;
}

#navigation li a:hover {
 background-color: yellow;
}

/*------------------ contenti ---------------*/

#content {
 width: 1100px;
 background-color: grey;
 margin-left: 133px;
 min-height: 580px;
}

#content h3 {
 margin-left: 20px;
 margin-top: 20px;  
 /*gives margin top to whole content div???*/
}


/*---------------- footeri --------------------*/

#footer {

}

#footer p {

}

<div id="header">
   
    <div id="navigation">
     
     <ul>
      <li id="nav-meny"><a href="#">Tabi1</a></li>
      <li id="nav-meny"><a href="#">Tabi2</a></li>
      <li id="nav-meny"><a href="#">Tabi3</a></li>
      <li id="nav-meny"><a href="#">Tabi4</a></li>
      <li id="nav-meny"><a href="#">Tabi5</a></li>
     </ul>

    </div>   <!-- end of navigation -->

   </div> <!--end of header -->

 
 <div id="content">

  <!-- Content here -->
    <h3> Here will be content...</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.\</p>


 </div> <!-- end of content-->

 

 <div id="footer">

 <p>Here is footer...</p>

 </div> <!-- end of footer-->

I searched in this site for this problem, but could not find a solution that helped me... Thank you for your time :)

Any opposition to using margin-top? http://jsfiddle.net/jzjez16h/ — sinanspd, Dec 03 '15 at 15:37
You need to eliminate the `margin-bottom` of the `ul` and the `margin-top` of the `h3`. It’s called [collapsing margins](http://www.w3.org/TR/CSS21/box.html#collapsing-margins). — CBroe, Dec 03 '15 at 15:38

Markus · Accepted Answer · 2015-12-03T15:46:13.943

Two things doing this:

margin-bottom of the ul in the header - you have to remove it
margin-top of the h2 in #content. Add a overflow: hidden to #content and the margin will stay inside #content (I think this is what you want).

Snippet:

/*--------------general-----------------*/
body {
 margin: 0;
 padding: 0;
}

/*------------header--------------------*/

#header {
 background-color: #d4e6d5;
 display: block;
 margin-bottom: 0;
 padding-bottom: 0;
}

#header #navigation {
 width: 1100px;
 background-color: red;
 margin-left: 133px;
 
}

#navigation ul {
 list-style: none;
 width: 685px;
 margin-left: 173px;
 margin-bottom: 0;  /* <------------ new */
}

#navigation #nav-meny {
 display:inline-block;
 border:solid;
 border-bottom: none;
}

#navigation li a{
 text-decoration: none;
 display: inline-block;
 padding: 20px;
 padding-left: 40px;
 padding-right: 40px;
 color: black;
 font-size: 16px;
 font-weight: bold;
 background-color: teal;
}

#navigation li a:hover {
 background-color: yellow;
}

/*------------------ contenti ---------------*/

#content {
 width: 1100px;
 background-color: grey;
 margin-left: 133px;
 min-height: 580px;
 overflow: hidden; /* <------------ new */
}

#content h3 {
 margin-left: 20px;
 margin-top: 20px;
 /*gives margin top to whole content div???*/
}


/*---------------- footeri --------------------*/

#footer {

}

#footer p {

}

<div id="header">
   
    <div id="navigation">
     
     <ul>
      <li id="nav-meny"><a href="#">Tabi1</a></li>
      <li id="nav-meny"><a href="#">Tabi2</a></li>
      <li id="nav-meny"><a href="#">Tabi3</a></li>
      <li id="nav-meny"><a href="#">Tabi4</a></li>
      <li id="nav-meny"><a href="#">Tabi5</a></li>
     </ul>

    </div>   <!-- end of navigation -->

   </div> <!--end of header -->

 
 <div id="content">

  <!-- Content here -->
    <h3> Here will be content...</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis debitis, eligendi quo atque esse ducimus nobis possimus illum molestias consequatur delectus voluptates, autem quos eum id est neque, sit vel.\</p>


 </div> <!-- end of content-->

 

 <div id="footer">

 <p>Here is footer...</p>

 </div> <!-- end of footer-->

It worked. Thank you for helping :) – kasske Dec 03 '15 at 15:53 — kasske, Dec 03 '15 at 15:53

Andrew Bone · Answer 2 · 2015-12-03T15:49:47.633

H3's and UL's intrinsically have margins, you'll need to set them to 0 to remove the gap

#navigation ul {
  list-style: none;
  width: 685px;
  margin-left: 173px;
  margin-bottom: 0;
}
#content h3 {
    margin-left: 20px;
    margin-top: 0px;  
    /*gives margin top to whole content div???*/
}

Edit:

Oh and if you want to stretch the container use padding not margin.

#content h3 {
  padding-left: 20px;
  padding-top: 20px;
  margin-top: 0px;
  /*gives margin top to whole content div???*/
}

score -1 · Answer 3 · answered Dec 03 '15 at 16:35

-1

Add this to your css file:

*{
    margin:0px;
}

JSFiddle: http://jsfiddle.net/leonard01/vrpmwnnv/1/

answered Dec 03 '15 at 16:35

Ikechukwu Kalu

1,474
14
15

White space between two vertical divs... How to remove it?

3 Answers3