Software & Apps > Design 37 37 people found this article helpful The Difference Between Padding and Margins in Web Design Distinguish between the two with this guide By Jennifer Kyrnin Jennifer Kyrnin Freelance Contributor University of California University of Washington Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. lifewire's editorial guidelines Updated on February 19, 2020 LouLou & Tummie/Imagezoo / Getty Images Design Graphic Design Photoshop Animation & Video 3D Design Trending Videos Close this video player 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. Was this page helpful? Thanks for letting us know! Get the Latest Tech News Delivered Every Day Subscribe Tell us why! Other Not enough details Hard to understand Submit