It is common in HTML to term all of its elements as Boxes. Similarly, in CSS, Box Model refers to modeling the design and layout of its elements. It has primarily four core components.

☛ Margin – It refers to the top most layer of the box.

☛ Border – The padding and content options work around the Border. Changing the background color can also affect the Border.

☛ Padding – It defines spacing around the box.

☛ Content – It represents the actual content to be shown.