CSS

Margin

Kooba

margin - definiuje zewnętrzny margines elementu.

Możliwe wartości:

  • auto - szerokość dostosowana automatycznie (najczęściej maksymalna dostępna).
  • jednostki długości i procenty (można używać też jednostek ujemnych)
  • Inherit - przejęcie wartości rodzica
Pamiętaj że jeśli ustalisz lewy i prawy margines na auto, miejsce po obu stronach zostanie podzielone po równo. Jest to metoda służąca do wyśrodkowywania elementów, nie będących tekstem (takich których nie da się wyśrodkować poleceniem Text-align: center).

Której krawędzi dotyczy margines można określić na kilka sposobów:

margin: wszystkie;

Podanie jednej wartości określa margines dla wszystkich krawędzi (Margin-top, Margin-bottom, Margin-left, Margin-right)

margin: górny-dolny lewy-prawy;

Dwie wartości określają najpierw dolny i górny margines (Margin-top i Margin-bottom) potem lewy i prawy (Margin-left i Margin-right)

margin: górny prawy-lewy dolny

Trzy wartości - pierwsza określa górny margines (Margin-top), druga lewy i prawy (Margin-right i Margin-left), trzecia dolny (Margin-bottom)

margin: górny prawy dolny lewy

Cztery wartości - kolejno Margin-top, Margin-right, Margin-bottom i Margin-left

Przykład użycia:

To jest zagnieżdżony element w innym, pokazujący działanie margin. W tym przypadku 10 pikseli.
</p>
<div style="border: 1px solid red;"><div style="margin: 10px; background-color: yellow">To jest zagnieżdżony element w innym, pokazujący działanie margin. W tym przypadku 10 pikseli.</div></div>

<code class="html4strict"><div style="border: 1px solid red;"><div style="margin: 0; background-color: yellow">To jest zagnieżdżony element w innym, pokazujący działanie margin. W tym przypadku 0 pikseli.</div></div>
To jest zagnieżdżony element w innym, pokazujący działanie margin. W tym przypadku 0 pikseli.
Działanie właściwości {{SUBJECT}} może być różne, zależnie od zastosowanego [[css/model_pudełkowy|modelu pudełkowego]].

Polecenia pokrewne

[[CSS/margin-top]], [[CSS/margin-right]], [[CSS/margin-bottom]], [[CSS/margin-left]]</li> [[CSS/padding]]</li> [[CSS/box-sizing]]

Odpowiednik html

</li> brak

Wersja specyfikacji

</li> CSS 1</li> CSS 2</li> CSS 2.1

Wsparcie przeglądarek

</li> Wszystkie nowoczesne przeglądarki</li> </ul>
CSS

1 komentarz

Ahh, rozpędziłem się ze słówkiem "element" w przykładach i wyszło "element margin", no ale niech już tak zostanie :P