What is the difference between Margin, Border, and Padding?

11 February 2020

The web browser engine displays HTML content as rectangular box (also known as the CSS model). That box can be divided into four parts: margin, border, padding and content and are defined by their respective edges.

The content area, defined by content edges (content height and width) contains the actual content of HTML element, such as text, image or video.

The padding area extends the content area to include its padding. Padding is a transparent area, or white space that surrounds the content area.

The border area extends the padding area to include its border. Border is a line that wraps around the padding area.

The margin extends the border to include its margin. Margin is an empty area used to separate the element from its neighbors.

The general rule of thumb of when to use padding or margin is:

• If you need more background, use padding.
• If you need more white space, use margin.

Lastly, be wary of margin collapse! It is where two elements have vertical margins merged into one another.