CSS

Margin

  • 2007-05-28 16:11
  • 1 komentarz
  • 2027 odsłon
  • Oceń ten tekst jako pierwszy
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:

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

To jest zagnieżdżony element w innym, pokazujący działanie margin. W tym przypadku 10 pikseli.


<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 modelu pudełkowego.


Polecenia pokrewne


Odpowiednik html


  • brak

Wersja specyfikacji


Wsparcie przeglądarek


  • Wszystkie nowoczesne przeglądarki

1 komentarz

Coldpeer 2007-05-28 15:09

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