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