Margin

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:

</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>

Polecenia pokrewne

* [[CSS/margin-top]], [[CSS/margin-right]], [[CSS/margin-bottom]], [[CSS/margin-left]] * [[CSS/padding]] * [[CSS/box-sizing]]

Odpowiednik html

* brak

Wersja specyfikacji

* CSS 1 * CSS 2 * CSS 2.1

Wsparcie przeglądarek

* Wszystkie nowoczesne przeglądarki