CSS Margins

The CSS margin property is used to create “space” around the HTML element. This “space” is defined outside the element border.

You can set the top, bottom, left, and right margins of the element individually, or you can use the margin property to set all the margins at the same time.

The following diagram shows the relationship between the padding and the margin, and the red line is the border of the element.

The margin property accepts any unit of length, which can be pixels, inches, millimeters, or em.

Margin Property Value

autoset browser’s default margins.Margins will depend on the browser
lengthset the value of margins (using pixels, pt, em, etc.)
%set the percentage value of margins

The following CSS rule defines a 1/4 inch margin for h1 elements:

h1 {
    margin : 0.25in;

The following CSS rule defines different margins for the four sides of h1 element:

h1 {
    margin : 10px 0px 15px 5px;

The margins of the four sides of the element are set in the order of top, right, bottom, and left. For example:

margin: top right bottom left

In addition, you can set a percentage value for margin:

p {
    margin : 10%;

The default value of the margin property is 0. If you do not set the margin property, the element will have no margins.However, the browser already provides predetermined styles for many elements, including margins.For example, if the <p> element is not set the margin value, the browser will give some spaces for it by default.

Value Copy

Sometimes we will set some duplicate values for the margin property:

p {
    margin: 0.5em 1em 0.5em 1em;

By copying value, you don’t have to type this pair of numbers repeatedly. The above rule is equivalent to the following rule:

p {
    margin: 0.5em 1em;

If the number of margin property values is less than 4, CSS takes values as follows:

  • If the left margin value is missing, the right margin value is used.
  • If the value of the bottom margin is missing, the value of the top margin is used.
  • If the right margin value is missing, the value of the top margin is used.

In other words, if you specify 3 values for the margin, the 4th value (that is, the left margin) is copied from the 2nd value (right margin). If you specify 2 values for the margin, the 4th value is copied from the 2nd value, and the 3rd value (bottom margin) is copied from the 1st value (top margin). In the last case, if only one value is given, the margins of the other three sides are copied from this value (top margin).For example:

h1 {margin: 0.25em 1em 0.5em;} /* is equivalent to 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;} /* is equivalent to 0.5em 1em 0.5em 1em */
p {margin: 1px;} /* is equivalent to 1px 1px 1px 1px */

Individual Sides

You can use the following four CSS properties to set the four sides of margins respectively:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

You can use these four properties together in a CSS rule, for example:

h2 {
    margin-top: 20px;
    margin-right: 30px;
    margin-bottom: 30px;
    margin-left: 20px;

However, it is better to use the margin property directly in this situation:

h2 {
    margin: 20px 30px 30px 20px;

Auto Value

If the element which has specified width is set the auto margin,the element will be centered horizontally relative to its parent element.For example:

div {
    width: 300px;
    margin: auto;
    border: 1px solid red;

Of course, you can also just set the left and right margins to auto value.

Leave a Comment

Your email address will not be published.