1

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?

Mostafa Fotouhi
  • 13
  • 4

1 Answers1

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>
MaxiGui
  • 6,190
  • 4
  • 16
  • 33
  • yes, that 's right . thanks . Why padding can not be applied from the bottom instead of the top – Mostafa Fotouhi Oct 14 '20 at 06:23
  • Because the pdding seen is first left and top. Because block always push down or right. It is its normal behave. And your text is actualy try to fit into the box as it can. Because if you think it should be push more down. But as it is border, than your text is push back into the « normal » box size. I guess you have your answer. – MaxiGui Oct 14 '20 at 06:32
  • @MostafaFotouhi I added a demo if you want see the best to achieve what you are doing – MaxiGui Oct 14 '20 at 08:06