1

I've had an issue with this project where a div appeared to have a gap from the div above it. After debugging, I've found that the gap is not just on the top, but the bottom as well. When I added overflow:auto or overflow:hidden, the mysterious gap disappeard and the divs touch (as desired), but when I set overflow:visible or don't set it at all, there is about 40px taken off the top and bottom. Why is it doing this?

Full JSFiddle for example, just add overflow:auto to "hero-container" in the CSS to 'fix' it.

#header{
    height: 50px;
    background-color: #05568D;
    border-radius: 10px 10px 0px 0px;
    position: relative;
}

#header > ul{
    list-style-type: none;
    padding: 0px 20px 0px 20px;
    margin: 0px;
    background-color:darkmagenta;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#header > ul > li{
    padding: 0px 10px 0px 10px;
    color: white;
    font-size: 20px;
    float: left;
    background-color: red;
}

#hero{
    background-color: white;
    border-radius: 0px 0px 10px 10px;
}

#hero-container{
    margin: 0px 100px 0px 100px;
    background-color: red;
    overflow: visible;
}

body{
    background: #0769AD;
    margin: 0;
    padding: 0;
    font-family: 'Teko', sans-serif;
}

.container{
    width: 96%;
    margin: 0 auto;
}
<div id="header" class="container">
       
       <ul>
           <li>Download</li>
           <li>API Documentation</li>
           <li>Blog</li>
           <li>Plugins</li>
           <li>Browser Support</li>
       </ul>
       
   </div>
   
   <div id="hero" class="container">
       
       <div id="hero-container">
           
           <p>This is a paragraph</p>
           
       </div>
   </div>

Can someone please explain this logic to me because I am baffled. What is the need for overflow if it's just a <p> and the height of its parents are even set?

J. Doe
  • 325
  • 1
  • 11

1 Answers1

0

Because <p></p> have the default margin top and bottom, if you set *{margin:0;padding:0;box-sizing:border-box;} you don't have this problem.

H. Messaoud
  • 9
  • 1
  • 1
    I wouldn't set it on the `*` though, but just limit it to the elements you want to remove the `margin` and `padding` from – Red May 25 '18 at 09:08
  • 1
    It's also enough if you use `p{margin:0;}` – K. P. May 25 '18 at 09:10