Tutorials     About     RSS
Tech and Media Labs

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

Featured Videos





















Sponsored Ads

Maildroppa - Smart Email Marketing Solution
Close TOC

All Trails

Trail TOC

Page TOC

Previous

Next