margin

Podsumowanie

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

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 */ 

Specifications

Browser compatibility