The Difference Between Padding and Margins in Web Design

Distinguish between the two with this guide

A computer monitor
LouLou & Tummie/Imagezoo/Getty Images

Margins and padding can be confusing because, in some ways, they seem like the same thing: white space around an image or object. Here's what you as a web designer need to know about their differences.

Padding

Padding is the space between an image or cell contents and its outside border. In the image below, the padding is the yellow area around the content. In this case, padding goes completely around the contents: top, bottom, right, and left sides. You can specify how much padding (in percentage, pixels, points, etc.) for each side, and they don't have to be the same. In this way, you can position content within an element.

An illustration demonstrating and padding, borders, and margins.

Margins

In contrast, margins are the spaces outside the border of an element, between the element and whatever is adjacent to it. In the image, the margin is the white area outside the entire object. Like the padding, the margin goes completely around the contents in this example: on the top, bottom, right, and left sides. You can use margins to position divs and other elements on a page.

Always test your pages in various browsers, operating systems (including mobile), and screen sizes to make sure they display exactly as you want them to.