Software & Apps Design The Difference Between Padding and Margins in Web Design Distinguish between the two with this guide By Jennifer Kyrnin Freelance Contributor Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. our editorial process LinkedIn Jennifer Kyrnin Updated February 19, 2020 LouLou & Tummie/Imagezoo / Getty Images Design Graphic Design Photoshop Animation & Video 3D Design Tweet Share Email 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. Lifewire 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.