box size collapsing | Sololearn: Learn to code for FREE!


box size collapsing

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

3/11/2021 1:25:01 PM

salar vahidi

1 Answer

New Answer


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.