Podsumowanie
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:
|
---|---|
Stosowana do | all elements, except elements with table display types other than table-caption , table and inline-table . It also applies to ::first-letter . |
Dziedziczona | no |
Percentages | refer to the width of the containing block |
Media | visual |
Wartość wyliczona | as each of the properties of the shorthand:
|
Animatable | yes, as a length |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
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
Specification | Status | Comment |
---|---|---|
CSS Basic Box Model The definition of 'margin' in that specification. |
Working Draft | No significant change |
CSS Transitions The definition of 'margin' in that specification. |
Working Draft | Defines margin as animatable. |
CSS Level 2 (Revision 1) The definition of 'margin' in that specification. |
Recommendation | Removes its effect on inline elements. |
CSS Level 1 The definition of 'margin' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.7 or earlier) | 3.0 | 3.5 | 1.0 (85) |
auto value |
1.0 | 1.0 (1.7 or earlier) | 6.0 (strict mode) | 3.5 | 1.0 (85) |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1) | 6.0 | 6.0 | 1.0 |