CSS Margins

This element has a margin of 70px.

CSS Margins

The CSS margin properties are used to create space around elements, outside of any defined borders.

With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

Margin - Individual Sides

CSS has properties for specifying the margin for each side of an element:

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

All the margin properties can have the following values:

• auto - the browser calculates the margin
• length - specifies a margin in px, pt, cm, etc.
• % - specifies a margin in % of the width of the containing element
• inherit - specifies that the margin should be inherited from the parent element

Tip: Negative values are allowed.

The following example sets different margins for all four sides of a <p> element:

Example :

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;}

Margin - Shorthand Property

To shorten the code, it is possible to specify all the margin properties in one property.

The margin property is a shorthand property for the following individual margin properties:

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

So, here is how it works:

If the margin property has four values:

margin: 25px 50px 75px 100px;

• top margin is 25px
• right margin is 50px
• bottom margin is 75px
• left margin is 100px

Example :

p {
    margin: 25px 50px 75px 100px;}

If the margin property has three values:

• margin: 25px 50px 75px;
• top margin is 25px
• right and left margins are 50px
• bottom margin is 75px

Example :

p {
    margin: 25px 50px 75px;}

If the margin property has two values:

• margin: 25px 50px;
• top and bottom margins are 25px
• right and left margins are 50px

Example :

p {
    margin: 25px 50px;} 

If the margin property has one value:

• margin: 25px;
• all four margins are 25px

Example :

p {
    margin: 25px;} 

The auto Value 

You can set the margin property to auto to horizontally center the element within its container.

The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:

Example :

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

The inherit Value 

This example lets the left margin of the <p class="ex1"> element be inherited from the parent element (<div>):

Example :

div {
    border: 1px solid red;
    margin-left: 100px;}

p.ex1 {
    margin-left: inherit;}

Margin Collapse 

Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

This does not happen on left and right margins! Only top and bottom margins!

Look at the following example:

Example :

h1 {
    margin: 0 0 50px 0;}

h2 {
    margin: 20px 0 0 0;}

In the example above, the <h1> element has a bottom margin of 50px and the <h2> element has a top margin set to 20px.

Common sense would seem to suggest that the vertical margin between the <h1> and the <h2> would be a total of 70px (50px + 20px). But due to margin collapse,

 the actual margin ends up being 50px.

All CSS Margin Properties

Property	Description
margin	A shorthand property for setting the margin properties in one declaration
margin-bottom	Sets the bottom margin of an element
margin-left	Sets the left margin of an element
margin-right	Sets the right margin of an element
margin-top	Sets the top margin of an element

CSS Borders

The CSS border properties allow you to specify the style, width, and color of an element's border.

I have borders on all sides.

I have a red bottom border.

I have rounded borders.

I have a blue left border.

Border Style

The border-style property specifies what kind of border to display.

The following values are allowed:

• dotted - Defines a dotted border
• dashed - Defines a dashed border
• solid - Defines a solid border
• double - Defines a double border
• groove - Defines a 3D grooved border. The effect depends on the border-color value
• ridge - Defines a 3D ridged border. The effect depends on the border-color value
• inset - Defines a 3D inset border. The effect depends on the border-color value
• outset - Defines a 3D outset border. The effect depends on the border-color value
• none - Defines no border
• hidden - Defines a hidden border

The border-style property can have from one to four values (for the top border,

 right border, bottom border, and the left border).

Example :

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Result:

otted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed border.

Note: None of the OTHER CSS border properties described below will have ANY effect unless the border-styleproperty is set!

Border Width

The border-width property specifies the width of the four borders.

The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick.

The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border).

5px border-width

Example :

p.one {
    border-style: solid;
    border-width: 5px;}

p.two {
    border-style: solid;
    border-width: medium;}

p.three {
    border-style: solid;
    border-width: 2px 10px 4px 20px;}

Border Color

The border-color property is used to set the color of the four borders.

The color can be set by:

• name - specify a color name, like "red"
• Hex - specify a hex value, like "#ff0000"
• RGB - specify a RGB value, like "rgb(255,0,0)"
• transparent

The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border). 

If border-color is not set, it inherits the color of the element.

Red border

Example :

p.one {
    border-style: solid;
    border-color: red;}

p.two {
    border-style: solid;
    border-color: green;}

p.three {
    border-style: solid;
    border-color: red green blue yellow;}

Border - Individual Sides

From the examples above you have seen that it is possible to specify a different border for each side.

In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left):

Different Border Style

Example :

p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;}

The example above gives the same result as this:

Example :

p {
    border-style: dotted solid;}

So, here is how it works:

If the border-style property has four values:

• border-style: dotted solid double dashed;
  • top border is dotted
  • right border is solid
  • bottom border is double
  • left border is dashed

If the border-style property has three values:

• border-style: dotted solid double;
  • top border is dotted
  • right and left borders are solid
  • bottom border is double

If the border-style property has two values:

• border-style: dotted solid;
  • top and bottom borders are dotted
  • right and left borders are solid

If the border-style property has one value:

• border-style: dotted;
  • all four borders are dotted

The border-style property is used in the example above. However, it also works 

with border-width and border-color.

Border - Shorthand Property 

As you can see from the examples above, there are many properties to consider when dealing with borders.

To shorten the code, it is also possible to specify all the individual border properties in one property.

The border property is a shorthand property for the following individual border properties:

• border-width
• border-style (required)
• border-color

Example :

p {
    border: 5px solid red;} 

Result:

Some text

You can also specify all the individual border properties for just one side:

Left Border 

p {
    border-left: 6px solid red;
    background-color: lightgrey;}

Result:

Some text

Bottom Border

p {
    border-bottom: 6px solid red;
    background-color: lightgrey;}

Result:

Some text

Rounded Borders

The border-radius property is used to add rounded borders to an element:

Normal border

Round border

Rounder border

Roundest border

Example :

p {
    border: 2px solid red;
    border-radius: 5px;}

Note: The border-radius property is not supported in IE8 and earlier versions.

All CSS Border Properties

Property	Description
border	Sets all the border properties in one declaration
border-bottom	Sets all the bottom border properties in one declaration
border-bottom-color	Sets the color of the bottom border
border-bottom-style	Sets the style of the bottom border
border-bottom-width	Sets the width of the bottom border
border-color	Sets the color of the four borders
border-left	Sets all the left border properties in one declaration
border-left-color	Sets the color of the left border
border-left-style	Sets the style of the left border
border-left-width	Sets the width of the left border
border-radius	Sets all the four border-*-radius properties for rounded corners
border-right	Sets all the right border properties in one declaration
border-right-color	Sets the color of the right border
border-right-style	Sets the style of the right border
border-right-width	Sets the width of the right border
border-style	Sets the style of the four borders
border-top	Sets all the top border properties in one declaration
border-top-color	Sets the color of the top border
border-top-style	Sets the style of the top border
border-top-width	Sets the width of the top border
border-width	Sets the width of the four borders