How to Set CSS Margins and Padding (And Cool Layout Tricks)

This article was peer reviewed by Dave Maxwell, Adrian Sandu, and Panayiotis Velisarakos. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

When I was just starting to learn CSS, the margin and padding properties always confused me. They seemed very similar and in some cases appeared to produce the same result.

In this tutorial, you will learn the difference between CSS margins and padding and how these properties affect the space between elements on a webpage. We will also discuss margin collapsing, the effect of using different units while creating responsive websites, and conclude with some layout tricks you can do with CSS margins and padding.

The Box Model

Elements in CSS are represented as a rectangular box. The size of this rectangular box is determined by the element's:

• Content
• Padding
• Border
• Margin

The content area of an element lies in the middle of the element. The padding surrounds the element's content . The borders in turn surround the padding. The margin of the element is its external layer, i.e., it lies outside the element.

The following diagram should make the arrangement clearer.

As apparent from the diagram, the padding of an element is the layer that extends from the outer edge of the element's content to the inner edge of its border. This property is used to control the spacing between the element's border and its main content. The padding applied on an element affects its size on the webpage. It does not affect the distance between different elements on a webpage.

When you want to increase or decrease the amount of space in-between elements, you should use the margin property. The margin applied on an element won't have any effect on its size.

One important thing related to boxes that you should keep in mind is that the sizes of all the boxes on a webpage depends on the box model being used. There are two different box models:

• W3C box model
• Traditional box model

See the Pen Choosing a Box Model by SitePoint (@SitePoint) on CodePen.

The W3C box model considers the width of the element to be equal to the content of the box excluding its padding and border. Padding and border are added on top of whatever dimensions you set for the element, which could have some unpredictable consequences on your page layout.

For example, let's consider a box with a width of 200px and a height of 200px, padding of 10px on all sides and a border of 2px all round. The browser does not see it simply as a 200px box. Rather, the browser calculates the horizontal space necessary to display the box as being 224px: 200 (width) + 2 (left border) + 10 (left padding) + 10 (right padding) + 2 (right border) = 224px. Given that the element is a perfect square, the height will also compute to 224px.

On the other hand, the traditional box model considers the width of the element to be equal to the sum of the content, padding and the border applied to the box. On the layout front, this means that, if your box is 200px wide, the browser computes the horizontal space it needs to display the box as being 200px wide, including padding and border. This yields more predictable results and it's easier to work with.

All browsers use the W3C box model by default. You can choose to specify the box model explicitly by setting the value of the box-sizing property to either content-box (W3C box model) or border-box (traditional box model). The traditional box model, being more intuitive, is the most popular approach among web developers.

Here is how you can set the box-sizing property to follow the traditional box model on your web project:

[code language="css"]
html {
box-sizing: border-box;
}

*, *:before, *:after {
box-sizing: inherit;
}
[/code]

If you learn best by doing, try experimenting with this fun interactive demo by Guy Routledge.

Setting Margins and Paddings

You can control the padding applied to the four sides of an element using the padding-top, padding-right, padding-bottom and padding-left properties. You can also specify the padding using the shorthand padding property.

• When a single padding value is present, CSS uses this value to determine the padding of all four sides:

  [code language="css"]
  /* all four sides */
  padding: 10px;
  [/code]

• When two values are present, the first value determines the top and bottom padding and the second value determines the left and right padding:

  [code language="css"]
  /* vertical | horizontal */
  padding: 2em 4em;
  [/code]

• When three values are present, the first value determines the top padding, the second value determines the left and right padding and the third value determines the bottom padding:

  [code language="css"]
  /* top | horizontal | bottom */
  padding: 1em 20px 2em;
  [/code]

• When all four values are present, they set the top, right, bottom and left padding in this exact order:

  [code language="css"]
  /* top | right | bottom | left */
  padding: 10px 10% 2em 15%;
  [/code]

In the following demo, the orange background represents the content area of different elements and the white area between the borders and the content area represents the padding that we applied on each element:

See the Pen Setting Paddings by SitePoint (@SitePoint) on CodePen.

Just like with padding, you can control the margin applied to the four sides of an element using the margin-top, margin-right, margin-bottom and margin-left properties. You can also specify the margin for all the four sides of an element using the shorthand margin property.

[code language="css"]
/* all four sides */
margin: 10px;

/* vertical | horizontal */
margin: 2em 4em;

/* top | horizontal | bottom */
margin: 2em auto 2em;

/* top | right | bottom | left */
margin: 10px 10% 2em 15%;
[/code]

Things to Keep in Mind

Continue reading %How to Set CSS Margins and Padding (And Cool Layout Tricks)%

by Baljeet Rathi via SitePoint