margin w CSS określa zewnętrzny margines elementu, czyli odstęp między krawędzią elementu a innymi elementami lub kontenerem. Margines nie należy do zawartości elementu i nie jest wypełniany kolorem tła elementu.
Podstawowe właściwości
Margines można ustawić dla wszystkich stron jednocześnie albo osobno:
margin- margines zewnętrzny ze wszystkich stron,margin-top- margines górny,margin-right- margines prawy,margin-bottom- margines dolny,margin-left- margines lewy.
Przykład:
<div>A</div>
<div style="margin-top: 20px">B</div>
W tym kodzie drugi element div ma ustawiony górny margines 20px, więc blok B zostanie odsunięty od poprzedniego bloku A o 20 pikseli.
Skrócony zapis margin
Właściwość margin może przyjmować kilka wartości:
margin: 10px; /* wszystkie strony */
margin: 10px 20px; /* góra/dół, lewo/prawo */
margin: 10px 20px 30px; /* góra, lewo/prawo, dół */
margin: 10px 20px 30px 40px; /* góra, prawo, dół, lewo */
Kolejność przy czterech wartościach jest zgodna z ruchem wskazówek zegara: góra, prawo, dół, lewo.
Margin a padding
margin tworzy odstęp na zewnątrz elementu, natomiast padding tworzy odstęp wewnątrz elementu, między treścią a obramowaniem.
Uwaga na marginesy pionowe
W przypadku elementów blokowych marginesy pionowe sąsiednich elementów mogą się łączyć, czyli występuje tzw. zapadanie marginesów. Na egzaminie najważniejsze jest rozumienie, że margin-top: 20px przesuwa dany element w dół względem poprzedniego elementu.