Tech and Media Labs
This site uses cookies to improve the user experience.




CSS margin

Jakob Jenkov
Last update: 2014-08-11

As explained in the text about the CSS box model, an HTML element can have margins around it.

You can control the margin around an HTML element via the following CSS properties:

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

Each of these CSS properties sets the margin around the HTML element using any of the standard CSS units (px, em etc.). Here are some examples:

#divOne {
    margin : 20px;
}

#divTwo {
    margin : 20px 10px 20px 10px;
}

#divThree {
    margin-top    : 20px;
    margin-right  : 10px;
    margin-bottom : 20px;
    margin-left   : 10px;
}

The first of these CSS margin examples sets the margin on all four sides of the HTML element with the id divOne to 20 pixels. It does so by setting the value 20px for the margin CSS property.

The second example sets the top margin to 20 pixels, the right margin to 10 pixels, the bottom margin to 20 pixels and the left margin to 10 pixels. It does so by setting the margin CSS property to 20px 10px 20px 10px. The four values specify the top, right, bottom and left margins individually.

The third example sets the top margin to 20 pixels, the right margin to 10 pixels, the bottom margin to 20 pixels and the left margin to 10 pixels. It does so by setting each of the four CSS properties margin-top, margin-right, margin-bottom and margin-left separately.

Jakob Jenkov




Copyright  Jenkov Aps
Close TOC