Today we're going to talk about the margin property in CSS! You should familiarize yourself with the box model if you aren't already.

Margin Property

As we see in the box model, the margins are always transparent and always surround the padding which surrounds the border which surrounds the content — margin > border > padding > content.

Properties

There are five possible properties you can use with margin:

  1. margin-left
  2. margin-right
  3. margin-top
  4. margin-bottom
  5. margin

The first four options allow you to have different values for any side with the code being clear as day. Consider the following:

p.indent {
color:#ff9300;
border:1px solid #fff;
margin-left:25px;
margin-top:10px;
margin-bottom:30px;
margin-right:15px;
}

We have a class called "indent" which is turning the text the color #ff9300 (AtomicPages Orange), this element will also have a border that is 1px in width, solid, and pure white. This will also have a left margin of 25px, a top margin of 10px, a bottom margin of 30px, and a right margin of 15px. That means the p element will be confided to those specifications. These values can be almost anything you would like them to be.

Values

As with most if not all CSS properties. The margin property can contain multiple values.

  1. auto — the browser determines the margin. Different browsers means different results!
  2. em, px, pt
  3. %

In the above code example we used pixels as the unit. You can use em, px, pt, or any other unit you really want to use. The most common units are px and em.

Margin — All Inclusive

Using the single margin property will allow you to define all values of a margin that you want instead of typing out margin-top, margin-left, etc. This all-inclusive property is pretty nifty if you're working and you're on a roll and whatnot. It can contain one to four values.

margin:15px 30px 45px 60px;
  • top margin - 15px
  • right margin - 30px
  • bottom margin - 45px
  • left margin - 60px

This example has four values for the margin property. The values start with margin-top and then go clockwise to margin-left. So if you think of clock and a new day, which always starts at 12 or the top of the clock, and then rotate clockwise the next 90° angle is at the right, then the 180° is at the bottom, and then the 270° is at the left. So it's like looking at the clock at every 90° angle you get top, right, bottom, left.

margin:15px 30px 45px;
  • top margin 15px
  • right and left margin 30px
  • bottom margin 45px

This might come as a surprise to us because you would think they would group the [top and right] and [bottom and left] segments separately, however; we can see in this example that the margin-top is 15px and the margin-bottom is 45px. The left and right margins are grouped together because they just belong together. If someone asks, "when I say a word you think of something that is opposite to that" and they ask, "up" you'll probably say "down" off the bat.

margin:15px 30px;
  • top and bottom margins 15px
  • right and left margins 30px

This might be more clear since there are only two values here. Naturally, we'd think [top and bottom] and [right and left] so the top and bottom margins will have a value of 15px, whereas the right and left margins will have a value of 30px.

margin:15px;
  • top, right, bottom, and left margins 15px

One single value for the margin property will set all margins to that value, in our case 15px. If you wish to see this property and the values in action click on the download button below!
margins.zip
margins.zip
Size: 3.12 KB

Be Sociable, Share!