Content/Border Box Model (CSS)

Border Box Model

The padding occurs inside your content box (that is, inside the area your text or other content is contained) and it puts a 'pad' around it.

The margin occurs outside of your content box. This is an area that divides your content box (including any padding) from other content boxes.

A border occurs between the padding and the margin.

Border box is useful to use on its own instead of padding and margin, especially if you are doing responsive web design.