If you鈥檙e new to CSS, you might have heard the words margin and padding but aren鈥檛 quite sure what they mean, or how to use them in your website designs. These concepts do similar things in CSS. However, they鈥檙e not quite the same, and there are important fundamental differences in their usage.
Once you fully understand the difference between margins and padding, you鈥檒l be able to make better design decisions for your website. So let鈥檚 take a look at these two properties and what they do. We鈥檒l include plenty of visual examples to illustrate how these important CSS components work.
In CSS, a margin is the space around an element鈥檚 border, while padding is the space between an element鈥檚 border and the element鈥檚 content. Put another way, the margin property controls the space outside an element, and the padding property controls the space inside an element.
Let鈥檚 explore margins first. Consider the element illustrated below, which has a margin of 10 pixels:
This means that there will be at least 10 pixels of space between this element and adjacent page elements 鈥� the margin 鈥減ushes away鈥� its neighbors. If we put multiple of these elements together, we see how margins create whitespace between them, giving them room to breathe:
On the other hand, padding is located inside the border of an element. The element below has padding of 10px on the left and right sides, and padding of 15px on the top and bottom sides:
To create the gap, the padding either grows the element鈥檚 size or shrinks the content inside. By default, the size of the element increases. If you want to create the gap by shrinking the content, set the box-sizing property to border-box (i.e. box-sizing: border-box).
When you鈥檙e adjusting the layout of your design, you鈥檒l need to determine whether to change the margins or the padding to achieve the desired visual effect. In this section, we鈥檒l give some common uses for each property, starting with margins.
CSS margins determine the space surrounding an element. Therefore, margins can be used to...
CSS margins can move an element up or down on the page, as well as left or right. If the width of your page is fixed, centering an element horizontally is simple: Just assign the value margin: auto.
See the Pen by Christina Perricone () on .
Margins determine the amount of space between adjacent elements, or whitespace. Whitespace is important for making web pages visually palatable. For instance, use margins to add space between images or between an image and the text description below it:
See the Pen by Christina Perricone () on .
On the flip side, a negative margin value lets you overlap page elements. This can come in handy when trying to achieve a broken grid effect.
See the Pen by Christina Perricone () on .
CSS padding determines how content looks within its respective element. You can change CSS padding to achieve the following effects:
This is the most common use of padding, and it鈥檚 useful for creating whitespace inside your elements.
See the Pen by Christina Perricone () on .
When you increase the padding value, the content will stay the same size, but you will add more space around the content. This is useful for interactive elements, like buttons, when you want to expand the clickable area.
To see how margins and padding work together to set spacing around an element鈥檚 content, we can also use the CSS box model. The CSS box model is used for page design and layout. Essentially, every HTML element in a document is wrapped inside a layered box that consists of the margin, border, padding, and content:
Applying height and width to your elements is easier once you understand the CSS box model. To ensure proper alignment, you鈥檒l just need to do some simple math. However, if you鈥檙e confused about how the box model works, you could end up with a sloppy layout. To learn more about this concept, see our guide to the CSS box model.
The border is the layer of the CSS box model that sits between margin and padding. By default, the border does not have any width, but you can set one with the CSS border property.
Margin and padding are always parts of an element, even if there鈥檚 no visible border. This image illustrates such a case:
This can be a bit confusing for beginners 鈥� the two blocks of content don鈥檛 have a visible border, but the margin and padding still apply.
Every HTML element has four margins that you can toggle: top, right, bottom, and left.
To set the same margin value on all four sides of an element, use the margin property. To set the margin for specific sides of an element, use the margin-top, margin-right, margin-bottom, and margin-left properties.
See the Pen by Christina Perricone () on .
You can also specify the margin property with two, three, or four values depending on the sides you want to apply margins to. If you want even margins on every side, you鈥檒l only need to apply one value. Otherwise, the order of the values is important:
See the Pen by Christina Perricone () on .
Each value can be represented as a fixed length (often in px), a percentage (which defines the value as a percentage of the width of its container), or auto (which lets the browser set the margin).
Like with margins, padding has four sides to be declared: top, right, bottom, and left.
To set padding on all sides, use the shorthand property padding. To set padding for a specific side, use the padding-top, padding-right, padding-bottom, and padding-left properties.
See the Pen by Christina Perricone () on .
When using the padding shorthand property, you may also define the padding using two, three, or four values. As with margins, one value will apply on all four sides. Otherwise, the order the values are written will determine which sides each applies to:
See the Pen by Christina Perricone () on .
Each value may be represented as a fixed length or a percentage (which defines it as a percentage of the width of the container).
To space out elements in CSS, you鈥檒l typically use the margin and padding properties. Understanding the difference is a step toward mastering CSS. You now also know how to set the margin and padding using the shorthand property, which is much quicker than defining each side independently.
In web design and web development, HTML and CSS go hand-in-hand. HTML defines content structure and semantics, while CSS establishes styling and layout. If you鈥檙e a beginner, we recommend becoming fully acquainted with HTML before attempting CSS. Keep going back to HTML as you learn CSS until you fully understand HTML. Once you鈥檝e applied CSS, HTML becomes much more interesting.
Editor's note: This post was originally published in April 2020 and has been updated for comprehensiveness.