Właściwość marginesu CSS
Przykład
Ustaw margines dla wszystkich czterech boków elementu <p> na 35 pikseli:
p {
margin: 35px;
}
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Właściwość margin
ustawia marginesy dla elementu i jest skróconą własnością dla następujących właściwości:
Jeśli właściwość margin ma cztery wartości:
- margines: 10px 5px 15px 20px;
- górny margines to 10px
- prawy margines to 5px
- dolny margines to 15px
- lewy margines to 20px
Jeśli właściwość margin ma trzy wartości:
- margines: 10px 5px 15px;
- górny margines to 10px
- prawy i lewy margines to 5px
- dolny margines to 15px
Jeśli właściwość margin ma dwie wartości:
- margines: 10px 5px;
- Marginesy górny i dolny to 10px
- prawy i lewy margines to 5px
Jeśli właściwość margin ma jedną wartość:
- margines: 10px;
- wszystkie cztery marginesy to 10px
Uwaga: Dopuszczalne są wartości ujemne.
Domyślna wartość: | 0 |
---|---|
Dziedziczny: | nie |
Animowalny: | tak, zobacz poszczególne właściwości . Przeczytaj o animacji |
Wersja: | CSS1 |
Składnia JavaScript: | obiekt .style.margin="100px 50px" |
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
Property | |||||
---|---|---|---|---|---|
margin | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
Składnia CSS
margin: length|auto|initial|inherit;
Wartości nieruchomości
Value | Description | Play it |
---|---|---|
length | Specifies a margin in px, pt, cm, etc. Default value is 0. Negative values are allowed. Read about length units | |
% | Specifies a margin in percent of the width of the containing element | |
auto | The browser calculates a margin | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Zwiń margines
Marginesy górny i dolny elementów są czasami zwinięte w pojedynczy margines, który jest równy największemu z dwóch marginesów.
Nie dzieje się tak na marginesach poziomych (lewy i prawy)! Tylko marginesy pionowe (górny i dolny)!
Spójrz na następujący przykład:
Przykład
p.a {
margin: 30px 0;
}
p.b {
margin: 20px 0;
}
W powyższym przykładzie element <p class="a"> ma margines górny i dolny 30px. Element <p class="b"> ma górny i dolny margines 20px.
Oznacza to, że margines pionowy między <p class="a"> a <p class="b"> powinien wynosić 50px (30px + 20px). Ale z powodu załamania się marginesu rzeczywisty margines wynosi 30 pikseli!
Więcej przykładów
Przykład
Ustaw margines dla elementu <p> na 35 pikseli dla góry i dołu oraz 70 pikseli dla prawej i lewej strony:
p {
margin: 35px 70px;
}
Przykład
Ustaw margines dla elementu <p> na 35 pikseli dla góry, 70 pikseli dla prawej i lewej strony oraz 50 pikseli dla dołu:
p {
margin: 35px 70px 50px;
}
Przykład
Ustaw margines dla elementu <p> na 35 pikseli dla góry, 70 pikseli dla prawej, 50 pikseli dla dołu i 90 pikseli dla lewego:
p {
margin: 35px 70px 50px 90px;
}
Powiązane strony
Samouczek CSS: margines CSS
Samouczek CSS: Model pudełkowy CSS
Dokumentacja HTML DOM: właściwość margin