Why Doesn't Height: 0 Hide My Padded <Div>, Even with Box-Sizing: Border-Box

Why doesn’t height: 0 hide my padded div , even with box-sizing: border-box?

The exact definition of border-box is:

That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified ‘width’ and ‘height’ properties.

So you can modify the height and width properties, but padding and border never change.

As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0.

Then, if height is 0, you can't make the padding be inside, because that implies the height will be negative.

border-box with padding can't have 0 width

According to the spec,

The content width and height are calculated by subtracting the border
and padding widths of the respective sides from the specified width
and height properties. As the content width and height cannot be
negative ([CSS21], section 10.2), this computation is floored at 0.

Therefore, your element effectively has a height and a width of 0. But you see it bigger because of the padding and the border.

Why does box-sizing: border-box still show the border with a width of 0px?

The content area is anything left after you subtract the width of the border.

The content width and height are calculated by subtracting the border
and padding widths of the respective sides from the specified ‘width’
and ‘height’ properties.

Specified width = 10 px

border width = 10 px

Content width = Specified width (10 px) - border width (10 px)

Content width 10 - 10 = 0

Specified width = 0 px

border width = 10 px

Content width = Specified width (0 px) - border width (10 px)

Content width 0 - 10 = -10 ( which would remove the 10 px used by the border)

But

As the content width and height cannot be negative ([CSS21], section
10.2), this computation is floored at 0.

Specified width = 0 px

border width = 10 px

Content width = Specified width (0 px) - border width (10 px)

Content width 0 - 10 = 0 ( which doesn't remove the 10 px used by the border)

If you don't want to use display:none; or visibility:hidden;, you need to set both the width:XX; and the border-right:XX; to zero.

Padding makes div bigger even though it has box-sizing: border-box;

As mentioned in the docs

border-box

...

The content box can't be negative and is floored to 0, making it
impossible to use border-box to make the element disappear.

...

What you could do, is to add the padding in the p inside the .content.

Max-height on border-boxed div with padding is not set

The property max-height works on the height of the element and you want to use it on the height and padding-bottom.

I think you are confused by the box-sizing property that it changes the element height to the overal height including the padding top and bottom (also me). But this is not the case as you will see in the jsFiddle example.

An example:

• The element with content is 100px in height.
• The max-height is set to 50px (element is now 50px in height).
• Now we apply the padding-bottom of 100px (more then the height of the element). The padding of 100px is added to the total height of the element making it 150px.

JsFiddle example: clicky

Box-sizing does not affect the padding

box-sizing: border-box does force all padding on selected elements to not affect the total size of the element like you mentioned. You are correct. The problem with your code is you were only setting this property on the body element on your first line:

body {
  font-size: 10px;
  box-sizing: border-box; /* this is only affecting the body element */
}

I moved that rule outside of the body selector into a universal selector which selects all elements in the document. This allows your element in question .mid_card to not grow larger when padding is applied.

* {
  box-sizing: border-box; /* moved this rule outside of body to affect all elements */
}
body {
  font-size: 10px;
}
.mid {
  background-color: #f6f9fc;
  margin: 1rem;
  height: 95vh;
}
.mid__card {
  background-color: white;
  margin: 4rem;
  border-radius: 12px;
  border: .1em solid white;
  box-shadow: 0 0.2rem 0.4rem 0.2rem rgba(0, 0, 0, 0.171);
  height: 15rem; /* increased height to avoid clipping */
  width: 40rem;
  padding: 3rem;
}

<body>
  <div class="mid">
    <div class="mid__title">
      <h1 class="mid__title__head">Our Team</h1>
    </div>
    <div class="mid__card">
      <h2 class="mid__card__title">Roger Harry</h2>
      <h3 class="mid__card__subtitle">Founder</h3>
      <p class="mid__card__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum animi magni hic molestias? Et adipisci cum ad doloremque exercitationem corporis error dolorum, voluptatem, dicta tenetur sunt nam explicabo quaerat architecto. Placeat corrupti esse
        debitis, veritatis nihil suscipit voluptates dolorem ab architecto est officiis laboriosam velit, sit dolore fugiat perferendis doloribus totam harum! Autem accusantium placeat fugiat soluta dolorem quidem eaque.
      </p>
      <button class="mid__card__button">LinkedİN</button>
    </div>
  </div>
</body>

---

Related Topics