Maybe sometimes box-sizing:border-box' it doesn't work properly?

Question

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
.box {
  height: 100px;
  width: 500px;
  padding: 20px;
  border: 40px solid black;
  background-color: blue;
}

<div class="box">
   With border-box - with padding & border
</div>

With border-box - with padding & border

Why in the example above padding applied only from the top and left?

Answer 1

To be clear again: box-sizing: border-box; make the box include the border into width and height calcul of the block.

It does not apply padding-bottom because you are setting a box of height: 100px

But next to that you are setting border of 40px and padding of 20px. So if you think about it reachs: 40px + 40px + 20px + 20px = 120px just for padding and border.

So this is going over the block height you set 120px > 100px. So html try to make its best based what your telling it.

I would recommand as follow:

.box {
  min-height: 100px;
  height: auto;
}

DEMO:

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
.box {
  min-height: 100px;
  height: auto;
  width: 500px;
  padding: 20px;
  border: 40px solid black;
  background-color: blue;
}

<div class="box">
   With border-box - with padding & border
</div>