white space between divs - no css

Question

Could anyone explain to me why there is whitespace between the first two div's and how to generally eliminate it? I looked in dev tools and it's not a margin or padding, its just plain white space...

Thanks!

 <div id="top-bar"> BBC Navigation bar </div> <div class="content"> <div class="red-bar"> <div class="news-title"> <h1>NEWS</h1> </div> </div> </div> 

Answer 1

Well, the H1-Tag has a margin!

 h1 { margin: 0px; } 

 <div id="top-bar"> BBC Navigation bar </div> <div class="content"> <div class="red-bar"> <div class="news-title"> <h1>NEWS</h1> </div> </div> </div> 

Answer 2

This come from your user agent style sheet, containing default margin

h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

To fix it:

h1
{
   margin: 0;
}

Answer 3

Here are two things that cause this:

1. User-agent stylesheets contain some basic styles, for example, making h1 s large. As it happens, h1 s are also given a margin.
2. Margin collapsing allows the margin of the h1 to extend out of the containing div s, because those div s have no padding or border.

Thus, you'll see space between the div s, even though they aren't explicitly styled.

Answer 4

If you check out the W3's "informative not normative" appendix on the default HTML stylesheet you'll see how those values are defined:

https://www.quora.com/Why-do-the-default-margins-on-HTML-headers-increase-from-h1-to-h6

 <div id="top-bar"> BBC Navigation bar </div> <div class="content"> <div class="red-bar"> <div class="news-title"> NEWS </div> </div> </div> 

Answer 5

The white space between divs due to default H1 Margin and Padding

So what you have to do is set d Margin and Padding for H1 in your CSS or within your html

CSS

h1 {
padding:0;
margin:0;

}

or

 <div id="top-bar"> BBC Navigation bar </div> <div class="content"> <div class="red-bar"> <div class="news-title"> <h1 style="padding:0; margin:0;">NEWS</h1> </div> </div> </div>