Explain the CSS box model and the effect of box-sizing.

Answer

Every element is a content box wrapped in padding, then border, then margin. By default width sets only the content, so padding and border are added on top and the element renders wider than the number you wrote. box-sizing: border-box makes width include padding and border, which is why most projects apply it globally. Margins sit outside the box entirely and don't count toward its size.

Points an interviewer listens for

• content → padding → border → margin
• content-box: width excludes padding/border
• border-box: width includes them
• Margin is always outside the box

Reported at

Similar questions have been reported by candidates at Ant Group, Digiryte, Ignxt Technologies, Mahe Technologies, muVerity, Neerx Technovation.