CSS Margin Properties

Control HTML Elements Margins With CSS

Margins are the area around an element. They are used to create space between one element and another. There are numerous css properties that you can use to control the margins of your html elements.

There are a couple of ways to declare margin property values. You can declare all the margins at the same time with the shorthand "margin" declaration, or you can apply margins to each individual side with margin-side (top, right, bottom, left)

When using the shorthand margin property you can apply different margin values to the different sides. If you supply only one value, that value will apply to all 4 sides of the element. If you supply 2 values, the first value will apply to the top and bottom margins, the second value will apply to the right and left margins. Supply 4 values if you want to specify different margin values for all four sides, they will apply clockwise starting from the top, ie. top right bottom left.

p {
  margin: 10px 20px; /* top/bottom margins 10px, right/left margins 20px */
}
div {
  margin-top : 10px;
  margin-right : 5px;
  margin-bottom : 15px;
  margin-left : 0px;
}
	

Using the shorthand version is nice since it saves you some typing. These two versions do the same thing.

div {
  margin-top : 10px;
  margin-right : 5px;
  margin-bottom : 15px;
  margin-left : 0px;
}
/* or */
div {
  margin : 10px 5px 15px 0px;
}