The box model is a crucial basic component when it comes to learning CSS. It describes how every HTML element is displayed as a box with multiple layers.
Every element has a
border box and
margin box. When creating layouts in CSS, knowing whether to use margin or padding for spacing makes a large difference.
These boxes surround each other: the margin box surrounds the border box, the border box surrounds the padding box, and the padding box surrounds the content box. The image below may help you get a visual sense of the box model.