Kwalifikacja: AUD.05 - Realizacja projektów graficznych i multimedialnych

W CSS każda właściwość związana z marginesami odnosi się do konkretnej krawędzi elementu. margin-left służy do ustawiania marginesu po lewej stronie, margin-right po prawej, a margin-bottom na dole. Często początkujący mylą je ze sobą, bo wszystkie brzmią podobnie i mają ten sam człon margin-, ale każda z nich reguluje tylko jedną stronę. Przykładowo, margin-left: 10px; ustawi odstęp tylko z lewej strony, bez wpływu na górę czy dół. Z mojego doświadczenia wynika, że łatwo jest założyć, iż dowolny margin obsłuży dowolny odstęp, ale to niestety pułapka. Dobrą praktyką jest czytanie właściwości od końca, czyli 'top', 'right', 'bottom', 'left', bo to jednoznacznie mówi, którą stronę modyfikujemy. Przypadkowe zastosowanie margin-right zamiast margin-top nie da oczekiwanych rezultatów, bo margines pojawi się po prawej, a nie u góry. To częsty problem podczas stylowania nagłówków czy sekcji, gdzie chcemy np. powiększyć tylko przerwę u góry. margin-bottom działa analogicznie, ale ustawia margines pod elementem, więc też nie rozwiąże problemu odstępu na górze. Moim zdaniem najlepiej od początku ćwiczyć rozróżnianie tych właściwości i pamiętać, że wartość marginesu dla góry ustawia się wyłącznie przez margin-top. W ten sposób unika się dziwnych układów i niepotrzebnego debugowania layoutu. Warto też wiedzieć, że CSS pozwala na skrócone zapisy typu margin: 10px 0 0 0;, ale wtedy kolejność też jest istotna: top, right, bottom, left. Dobrze jest mieć to w pamięci, żeby sprawniej pisać i czytać style arkusza.