Introduction to the CSS Box Model - The complete CSS3 tutorial

{tab CSS comments}

{tab Linking CSS to HTML}

{tab CSS Selectors Notes}

{tab Margin Notes}

{tab Borders}

{tab Padding}

{/tabs}

 

The margin is an outer, invisible border around your element.. 

You can specify the margin(s) for an element by using one or several of the four margin-* properties, named

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

 

<style type="text/css">
.box {
        background
-color: DarkSeaGreen;
        width
: 100px;
        height
: 100px;
        margin
-top: 10px;
        margin
-right: 5px;
        margin
-bottom: 10px;
        margin
-left: 5px;
}
</style>

<div class="box">
        Box
</div>

 

Using the margin shorthand property

 

While it's perfectly fine to use the margin-* properties, a so-called shorthand property exists, simply named margin. It allows you to define margin values for all four sides, without having to repeat all the property names each time. The margin property simply directs your values out to the margin-top, margin-right, margin-bottom and margin-left properties, so it's just another way of using the CSS syntax, which will shorten your code in many situations.

The margin property can take from one to four values.

 

<style type="text/css">
.box {
        background
-color: DarkSeaGreen;
        width
: 100px;
        height
: 100px;
}
</style>

<div class="box" style="margin: 10px 10px 10px 10px;">
        Box
</div>

<div class="box" style="margin: 10px 10px;">
        Box
</div>

<div class="box" style="margin: 10px;">
        Box
</div>


When specifying margins, the following rules apply:

4 values:

  1. [top margin]
  2. [right margin]
  3. [bottom margin]
  4. [left margin]

3 values (not as commonly used):

  1. [top margin]
  2. [left/right margin]
  3. [bottom margin]

2 values:

  1. [top/bottom margin]
  2. [left/right margin]

1 value:

  1. [top/right/bottom/left margin]

 

Introduction to the CSS Box Model - The complete CSS3 tutorial

Relative margins

A lot of margins will be specified in absolute values (usually pixels, like we saw in the first example), but just like most other size related CSS properties, you may also use relative values. This is usually done by either using a relative size unit, for instance the em unit (1 em equals the size of the current font), or simply by specifying a percentage-based value.

 

<style type="text/css">
.box {
        width
: 100px;
        height
: 100px;
        padding
: 10px;
        background
-color: DarkSeaGreen;
}

.box-header {
        background
-color: CornflowerBlue;
}
</style>

<div class="box">
       
<div class="box-header">
                Header
       
</div>
        Hello, world!
</div>

 

Negative margins

This can be utilized to pull an element closer to another or to negate the effect of padding. Now, padding will be explained in the next chapter, but since we'll be using it in the next example, just think of it as an internal margin - space reserved inside of the element, instead of outside like margins.

 

<style type="text/css">
.box {
        width
: 100px;
        height
: 100px;
        padding
: 10px;
        background
-color: DarkSeaGreen;
}

.box-header {
        background
-color: CornflowerBlue;
        margin
: -10px -10px 10px -10px;
        padding
: 5px 10px;
}
</style>

<div class="box">
       
<div class="box-header">
                Header
       
</div>
        Hello, world!
</div>