The Difference Between Padding and Margins in Web Design

Distinguish the two with this guide

A computer monitor
LouLou & Tummie/Imagezoo/Getty Images

If you don't know what the difference between padding and margins is, you're not alone. It's a frequently asked question and has stumped many a web designer. With this quick tutorial, learn to distinguish between the two. 

Understanding the Difference

Margins and padding can be confusing to the novice Web designer and sometimes even designers with more experience. After all, in some ways, they seem like the same thing: white space around an image or object.

An illustration demonstrating and padding, borders, and margins.

Padding is simply the space inside the border between the border and the actual image or cell contents. In the image, the padding is the yellow area around the contents. Note that padding goes completely around the contents. You'll find padding on the top, bottom, right and left sides.

On the other hand, margins are the spaces outside the border, between the border and the other elements next to this object. In the image, the margin is the wite area outside the entire object. Note that, like the padding, the margin goes completely around the contents. There are margins on the top, bottom, right and left sides.

Useful Tips

Keep in mind that if you are planning on doing really fancy things with margins and padding that some browsers, such as Internet Explorer, don't implement the box model correctly. This means that your pages will look different (and sometimes vastly different) in other browsers.