Własność margin określa marginesy elementu. Jest ona również sposobem na ustawienie wszystkich marginesów jednocześnie. Negatywne wartosci są dozwolone.

Wartość początkowa as each of the properties of the shorthand:

margin-bottom: 0

margin-left: 0

margin-right: 0

margin-top: 0

Stosowana do all elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter and ::first-line.

Dziedziczona no

Percentages refer to the width of the containing block

Wartość wyliczona as each of the properties of the shorthand:

margin-bottom: the percentage as specified or the absolute length

margin-left: the percentage as specified or the absolute length

margin-right: the percentage as specified or the absolute length

margin-top: the percentage as specified or the absolute length

Animation type a length

Składnia

margin: <length> {1,4} | <percentage> {1,4} | inherit | auto;

Wartości

<length>

przyjmuje konkretną odległość.

<percentage>

procentowa wartość szerokości zawierającego bloku

auto

przeglądarka obliczy i wybierze margines dla określonego elementu

Jeśli podano:

jedną wartosć, zostaje ona przypisana dla wszystkich stro.

dwie wartości, pierwsza odnosi się do: góra i dół, a druga do: prawo i lewo.

trzy wartości, pierwsza odnosi się do góra, druga do: prawo i lewo, a trzecia do: dół.

cztery wartości, kolejno odnoszą się do: góra, prawo, dół, lewo;

Przykłady

  .content {

    margin: 5%;  /* wszystkie strony margines 5% */

  }

  .sidebox {

    margin: 10px;  /* wszystkie strony margines 10px */

  } 

  .rightbox {

    margin: 10px 20px;  /*  górny i dolny margines 10px */

  }                     /*  lewy i prawy margines 20px */

  .leftbox {               /*  górny margines 10px */

    margin: 10px 3% 20px;  /*  lewy i prawy margines 3% */

  }                        /*  dolny margines 20px */

  .mainbox {                    /*  górny margines 10px */

     margin: 10px 3px 30px 5px; /*  prawy margines 3px */

  }                             /*  dolny margines 30px */

                                /*  lewy margines 5px */ 

Źródło