Why adding 1px padding adding 10px in height of div

Question

I am trying to learn CSS basics. Below is the HTML and CSS for which I am unable to understand something

* {
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
}

.section-title {
  color: #2ddf5c;
}

main {
  background-color: burlywood;
}

#product-overview {
  background: #ff1b68;
  width: 100%;
  height: 528px;
  padding: 10px;
}

.main-header {
  background: #2ddf5c;
  padding: 0px 16px;
}

<header class="main-header">
  <div>
    <a href="index.html">
                    uhost
                </a>
  </div>
  <nav class="main-nav">
    <ul class="main-nav__items">
      <li class="main-nav__item"><a href="#">Packages</a></li>
      <li class="main-nav__item"><a href="#">Customers</a></li>
      <li class="main-nav__item"><a href="#">Start hosting</a></li>
    </ul>
  </nav>
</header>
<main>
  <section id="product-overview">
    <h1>Get the freedom you deserve</h1>
  </section>
  <section id="plans">
    <h1>Choose your plan</h1>
  </section>
</main>

We can see that there is a small gap between red and green area. As per my understanding, this gap exists because both nav and main are block elements.

Right now, height of header element is 90px(approx.) But if I am trying to update padding of main-header, then browser is removing blank area between header and main elements, and also updating the height of header to 106px

.main-header {
        background: #2ddf5c;
        padding: 1px 16px;
 }

Please help me understand why this is happening.

Simply inspect the element using your browser's development tools (F12 on Windows) to find out where certain observed behaviour originates. — connexo, Feb 11 '21 at 17:06

score 3 · Accepted Answer · answered Feb 11 '21 at 17:08

This has nothing to do with block elements. What happens: The ul at the bottom of your header has a default margin, top and bottom. The margin-bottom goes out of the header and creates the white space (this is known as "collapsing margins").

If you manually set that margin to zero:

.main-nav ul {
  margin-bottom: 0;
}

, the space disappears. But when you add a padding-bottom to the header (regardless which value), the (default) margin-bottom of the ul remains inside the header element, also causing the white space to disappear.

Here's the situation without the added padding, but with header's margin-bottom set to zero:

* {
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
}

.section-title {
  color: #2ddf5c;
}

main {
  background-color: burlywood;
}

#product-overview {
  background: #ff1b68;
  width: 100%;
  height: 528px;
  padding: 10px;
}

.main-header {
  background: #2ddf5c;
  padding: 0px 16px;
}
.main-nav ul {
  margin-bottom: 0;
}

<header class="main-header">
  <div>
    <a href="index.html">
                uhost
            </a>
  </div>
  <nav class="main-nav">
    <ul class="main-nav__items">
      <li class="main-nav__item"><a href="#">Packages</a></li>
      <li class="main-nav__item"><a href="#">Customers</a></li>
      <li class="main-nav__item"><a href="#">Start hosting</a></li>
    </ul>
  </nav>
</header>
<main>
  <section id="product-overview">
    <h1>Get the freedom you deserve</h1>
  </section>
  <section id="plans">
    <h1>Choose your plan</h1>
  </section>
</main>

score 2 · Answer 2 · answered Feb 11 '21 at 17:12

Well, I'm not sure If I understood you right, you are bothered about the white gap between the two elements? (I don't have the Privilege to comment your question)

If so the reason of the white gap is because UL elements have "default" style that the browser gives them. you need to change those default style settings by doing:

ul {
    margin: 0;
}

Hope I got you right :)

Why adding 1px padding adding 10px in height of div

2 Answers2