By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

CSS Margin and Padding Properties

Margin and Padding CSS Reference. Includes a link to each Property, and its useful Example.

Edited: 2016-01-11 01:46

Image showing the CSS box model.

The margin and padding properties of CSS are used control the spacing of elements. Margin is used to control the space outside of an element, and padding is used to control the space inside an element.

Both set of properties are often used to accomplish the same things, so which set to use is mostly down to personal preference, but sometimes there may be advantages to using one rather than the other. Best advice is to experiment, and settle with what works for you.

The shorthand version of the properties are usually better than those used to target each side individually since they requires much less coding.

Using the Margin and Padding properties

Applied values automatically transfer to the opposite side. In the below example, this means that the top and bottom will have the same values, and so will the left and right. I.e.

div {
 margin: 1em 2em;

All four sides can be controlled in just one rule:

div {
 margin: 1em;

The shorthand property can also be used to control each side individually, this is done by defining all four values:

div {
 margin: 1em 1em 1em 0.5em; /* top right bottom left */

Note. Above examples also work with padding!

Margin Properties

The margin properties are used to control the space between elements on a page. The properties are: margin, margin-top, margin-right, margin-bottom, and margin-left.

Top and bottom margins may sometimes collapse, if this is a problem try using padding instead.

See also: Margin properties

Padding Properties

Where margin is used to control the space outside an element, padding is used to control space inside an element. They often appear to have the same functionality, but they actually do behave in different ways. The properties are: padding, padding-top, padding-right, padding-bottom, and padding-left.

See also: Padding properties