Przejdź do treści

Atrybuty mieszane marginesu {margin}

Jak ustawić jednocześnie wszystkie marginesy dla dowolnego elementu: górny, prawy, dolny, lewy?

selektor { margin: wartości atrybutów }
Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].

Natomiast jako "wartości atrybutów" należy podać:
  1. Jedną wartość - wtedy wszystkie marginesy będą jednakowe.

    Przykład

    To jest akapit, który ma wszystkie marginesy równe 2cm (margin: 2cm)

  2. 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)

  3. 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)

  4. 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?

Aby ustawić marginesy w CSS, można użyć właściwości margin i określić wartości dla górnej, prawej, dolnej i lewej strony marginesu. Na przykład: "margin: 10px 20px 10px 20px" ustawia marginesy 10 pikseli na górze i na dole oraz 20 pikseli po prawej i lewej stronie elementu.

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: auto1
2008-12-11
1
2004-11-09
12
2015-07-29
3.5
1998-11-18
1
2003-06-23

Komentarze

Zobacz więcej komentarzy

Facebook