CSS.Margin vs. Padding: What's the Difference?

If you’re new toCSS., you might have heard the wordsmarginand填充but aren’t quite sure what they mean, or how to use them in your website designs. These concepts do similar things in CSS. However, they’re not quite the same, and there are important fundamental differences in their usage.

Once you fully understand the difference between margins and padding, you’ll be able to make better design decisions for your website. So let’s take a look at these two properties and what they do. We’ll include plenty of visual examples to illustrate how these important CSS components work.

What’s the difference between margin and padding in CSS?

In CSS, a margin is the space around an element’s border, while padding is the space between an element’s border and the element’s content. Put another way, the margin property controls the spaceoutsidean element, and the padding property controls the spaceinsidean element.

Let’s 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 “pushes away” its neighbors. If we put multiple of these elements together, we see how margins create whitespace between them, giving them room to breathe:

另一方面，填充位于元素边界内。下面的元素在左侧和右侧有10px的填充，顶部和底部的15px填充：

要创建差距，填充要么生长元素的大小或缩小内部内容。默认情况下，元素的大小增加。如果要通过缩小内容创建差距，请设置box-sizingproperty toborder-box(i.e.box-sizing: border-box).

When to Use Margins vs. Padding

当你身处e adjusting the layout of your design, you’ll need to determine whether to change the margins or the padding to achieve the desired visual effect. In this section, we’ll give some common uses for each property, starting with margins.

Uses for Margins

CSS.margins determine the space surrounding an element. Therefore, margins can be used to...

Change an Element’s Position on the Page

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 valuemargin: auto.

See the PenCSS.Margin vs. Padding - margin: autoby Christina Perricone (@hubspot) onCodePen.

Set the Distance Between Nearby Elements

边缘确定相邻元素之间的空间量，或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 PenCSS.Margin vs. Padding - Image Whitespaceby Christina Perricone (@hubspot) onCodePen.

Overlap Elements

On the flip side, a negative margin value lets you overlap page elements. This can come in handy when trying to achieve abroken grid effect.

See the PenCSS边缘与填充 - 突破网格效应by Christina Perricone (@hubspot) onCodePen.

Uses for Padding

CSS.填充determines how content looks within its respective element. You can change CSS padding to achieve the following effects:

Add Space Between Content and Its Border

This is the most common use of padding, and it’s useful for creating whitespace inside your elements.

See the PenCSS.Margin vs. Padding - Padding Sizesby Christina Perricone (@hubspot) onCodePen.

Change the Size of an Element

当您增加填充值时，内容将保持相同的大小，但您将在内容周围添加更多空间。对于要展开可点击区域时，这对于交互式元素（如按钮）很有用。

The CSS Box Model

To see how margins and padding work together to set spacing around an element’s 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’ll just need to do some simple math. However, if you’re confused about how the box model works, you could end up with a sloppy layout. To learn more about this concept, see ourguide to the CSS box model.

CSS.Margin vs. Padding vs. Border

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 CSSborderproperty.

Margin and padding are always parts of an element, even if there’s no visible border. This image illustrates such a case:

这是一个对于初学者来说听起来有点太瓦o blocks of content don’t have a visible border, but the margin and padding still apply.

如何添加CSS利润率

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 themarginproperty. To set the margin for specific sides of an element, use themargin-top,margin-right,margin-bottom, andmargin-leftproperties.

See the PenCSS.Margin vs. Padding - Setting Margins 1by Christina Perricone (@hubspot) onCodePen.

You can also specify themargin属性有两个，三个或四个值，具体取决于您想要施加利润率的两侧。如果您想要在每一方面的边距，只需应用一个值。否则，值的顺序很重要：

• Two values apply to the top and bottom, then right and left.
• Three values apply to the top, then right and left, then bottom.
• Four values apply to the top, then right, then bottom, then left.

See the PenCSS.Margin vs. Padding - Setting Margins 2by Christina Perricone (@hubspot) onCodePen.

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), orauto（允许浏览器设置边距）.

How to Add Padding in CSS

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填充. To set padding for a specific side, use the填充顶部,填充-right,填充底部, and填充-leftproperties.

See the PenCSS.Margin vs. Padding - Setting Padding 1by Christina Perricone (@hubspot) onCodePen.

When using the填充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:

• Two values apply to the top and bottom, then right and left.
• Three values apply to the top, then right and left, then bottom.
• Four values apply to the top, then right, then bottom, then left.

See the PenCSS.Margin vs. Padding - Setting Padding 2by Christina Perricone (@hubspot) onCodePen.

Each value may be represented as a fixed length or a percentage (which defines it as a percentage of the width of the container).

CSS.Margins and Padding: Similar, But Not the Same

To space out elements in CSS, you’ll typically use themarginand填充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’re 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’ve applied CSS, HTML becomes much more interesting.

Editor's note: This post was originally published in April 2020 and has been updated for comprehensiveness.