box size collapsing

Question

why in this code, the box's size suddenly collapse and shrink from top and bottom when the top and bottom paddings are set to zero? it doesn't collapse even when it is 1px. but it nevertheless collapses when it is set to zero! I couldn't figure out what the problem exactly is
https://code.sololearn.com/W0A1817a20A1

Answer 1

By default, the width and height of an element is calculated like this:

width + padding + border = actual width of an element
height + padding + border = actual height of an element

So, when you set top and bottom paddings to zero.. that time your actual height is ....
border + height + zero = actual height
&& Your header collapse.