Why does overflow: hidden make my header fill in the empty gap above it?

Question

Currently trying to make a header bar.

Adding "overflow:hidden" to my header tag allows the header to take the available space above and below it but why is this? I thought the overflow: hidden was only to hide scroll bars? If you take away "overflow:hidden", you can see that the header tag goes back to only taking up as much height as the text it holds.

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <header id="main-header">
            <h1>Test Header</h1>
        </header>

        <nav id="site-navigation">
            <div class="main-container">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </div>
        </nav>

        <main>
            <div class="main-container">
                <section id="main">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </section>
            </div>
        </main>

    </body>
</html>

CSS:

body{
    background-color:#f4f4f4;
    color:#555;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6em;
    margin: 0px;
    padding: 0px;
}

.main-container{
    width:80%;
    margin:auto;
}

#main-header{
    background-color: #f74040;
    overflow: hidden;
    color: #ebebeb;
}

Does setting body margin to 0 not set all elements margin within that tag to 0? — Denzel Hooke, May 20 '21 at 23:45

Spectric · Answer 1 · 2021-05-20T23:29:36.853

Changing overflow to anything but visible, changes the block formatting context. If you want it to respect line height without overflow:hidden, change the h1's display to inline-block like so:

body{
    background-color:#f4f4f4;
    color:#555;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6em;
    margin: 0px;
    padding: 0px;
}

.main-container{
    width:80%;
    margin:auto;
}


#main-header{
    background-color: #f74040;
    color: #ebebeb;
}
#main-header h1{
  display:inline-block;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <header id="main-header">
            <h1>Test Header</h1>
        </header>

        <nav id="site-navigation">
            <div class="main-container">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </div>
        </nav>

        <main>
            <div class="main-container">
                <section id="main">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </section>
            </div>
        </main>

    </body>
</html>

Why does overflow: hidden make my header fill in the empty gap above it?

1 Answers1