Atrybuty mieszane marginesu {margin}
Jak ustawić jednocześnie wszystkie marginesy dla dowolnego elementu: górny, prawy, dolny, lewy?
selektor { margin: wartości atrybutów }
Natomiast jako "wartości atrybutów" należy podać:
- Jedną wartość - wtedy wszystkie marginesy będą jednakowe.
Przykład
To jest akapit, który ma wszystkie marginesy równe 2cm (margin: 2cm)
- Dwie wartości - z których pierwsza oznacza górny i dolny margines, natomiast druga - lewy i prawy.
Przykład
To jest akapit, który ma górny i dolny margines równy 2cm, a lewy i prawy 1cm (margin: 2cm 1cm)
- Trzy wartości - z których pierwsza oznacza górny margines, druga - jednocześnie lewy i prawy, a ostatnia - dolny.
Przykład
To jest akapit, który ma górny margines równy 2cm, lewy i prawy 1cm, a dolny 3cm (margin: 2cm 1cm 3cm)
- Cztery wartości - które oznaczają kolejno marginesy: górny, prawy, dolny, lewy.
Przykład
To jest akapit, który ma następujące marginesy: górny 2cm, prawy 5mm, dolny 3cm, lewy 1cm (margin: 2cm 5mm 3cm 1cm)
We wszystkich przypadkach wartości należy podać, korzystając z jednostek długości.
Pytania i odpowiedzi {margin}
Jak ustawić marginesy w CSS?
Co to jest "margin" w CSS?
margin
w CSS to właściwość określająca odstęp pomiędzy elementem a jego otoczeniem zewnętrznym. Może to być przestrzeń pomiędzy elementami lub między elementem a krawędzią kontenera. Przykład: "margin: 20px
" ustawia margines o szerokości 20 pikseli wokół elementu.
Jak działa "margin: auto"?
Ustawienie "margin: auto
" dla elementu w CSS powoduje, że przeglądarka automatycznie wyznacza równy margines na lewej i prawej stronie tego elementu, co skutkuje wyśrodkowaniem go w poziomie w obrębie jego rodzica. Jest to szczególnie użyteczne, gdy chcesz wyśrodkować elementy w poziomie bez konieczności ręcznego określania konkretnych marginesów. Przykład: <div style="width: 300px; margin: auto; background-color: lightgray">Treść</div>
wyśrodkuje poziomo element <div>
o szerokości 300 pikseli w jego rodzicu.
Przeglądarki
![]() Chrome | ![]() Firefox | ![]() Edge | ![]() Opera | ![]() Safari | |
---|---|---|---|---|---|
margin: wartość | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 3.5 1998-11-18 | 1 2003-06-23 |
margin: auto | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 3.5 1998-11-18 | 1 2003-06-23 |