Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Posted by Josh McMullin
Josh McMullin
3,012 Points

Removing white space between vertical or horizontal divs?

Hi all, I'm just starting a project and I noticed I've got white space between my header div and my main div. Is there an easy fix to that?

My html is -

<!DOCTYPE html>

<html>
<head>
    <title>Flowers by Jackie</title>
     <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <div class="main_header">
        <header>
            <span>Elegant Floral Design for Any Occassion</span>    
            <h1>FLowers by Jackie</h1>
                <ul>
                    <li>About</li>
                    <li>Contact</li>
                </ul>
        </header>
    </div>
    <div class="main_content">
        <div id="row1">
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>            
        </div>
        <div id="row2">
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>            
        </div>
    </div> <!-- end primary content -->


</body>
</html>

and my CSS

* {
    box-sizing: border-box;
}


body {
    margin: 0;    
} /*-- default width of body is 100% --*/

.main_header {
    background-color: tomato;
    height: 250px;

}

.main_content {
    background-color: grey;
    clear: both;

}
Rich Bagley
Rich Bagley
25,868 Points

Hi,

Just amended the formatting of your post above so the code is a little easier to read.

Here's how to do it if you need to in future.

-Rich

7 Answers

Rich Bagley
Rich Bagley
25,868 Points
Rich Bagley
Rich Bagley
25,868 Points

Hi Josh,

The space is due to the margin on the ul tags.

One solution would be to replace the 16px top and bottom margin with padding:

ul {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 16px;
  padding-bottom: 16px;
}

This will resolve this particular issue but you may encounter it for other tags such as p as you add them.

For any future issues you find, I would recommend using the browser developer tools (usually found by clicking F12 in the browser or right clicking on an element and choosing 'Inspect Element') to inspect the elements and check the box models.

Hope that helps :)

-Rich

Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points
Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points

Hey ! which main div are you talking about !?

Josh McMullin
Josh McMullin
3,012 Points
Josh McMullin
Josh McMullin
3,012 Points

sorry the space I don't want is specifically between .main_header & .main_content.

Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points
Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points

you just have to display your .main-content inline block and set the width you want it to have:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Flowers by Jackie</title>
 <link rel="stylesheet" href="css/main.css">
  </head>
<header>
        <div class="main_header">

            <span>Elegant Floral Design for Any Occassion</span>    
            <h1>FLowers by Jackie</h1>
                <ul>
                    <li>About</li>
                    <li>Contact</li>
                </ul>
        </div>
   </header>
      <body>
<div class="main_content">
    <div id="row1">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>            
    </div>
    <div id="row2">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>            
    </div>
</div> <!-- end primary content -->



  </body>
</html>

and this is your css file

* { box-sizing: border-box; }

body 
{
  margin: 0;

} 

.main_header 
{ 
  background: tomato;
  height: 250px;
  width:100%;


}

.main_content 
{
  display:inline-block;
  background-color: grey; 

  width:100%;

}

but as you would see, you should always put the title inside your head Tag element with the css link, and your <header> tag should wrap your .main-header <div>, not the other way arround !

Rafael Peralta Jr
Rafael Peralta Jr
21,879 Points
Rafael Peralta Jr
Rafael Peralta Jr
21,879 Points

Hmm...You may want to try this:

<code>
.main-header, 
.main-content {
    padding:0;
    margin:0;
}
</code>
/* If that doesn't work, then target your h1 tags or the ul tag */
Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points

Hey ! it has nothing to do with that divs Rafael Peralta Jr. , cause if you ctrl+Maj+I the website; you ll see that the space isnt due to the divs, but to the body !

cheers !

Simon Tucker
Simon Tucker
9,113 Points
Simon Tucker
Simon Tucker
9,113 Points 
.main-header{
line-height: 0px;
}

This works for me

Josh McMullin
Josh McMullin
3,012 Points
Josh McMullin
Josh McMullin
3,012 Points

Hey all, so for just now getting back to this. I really appreciate your help.

Josh

Rich Bagley
Rich Bagley
25,868 Points

No problem :)