Zapis CSS margin: auto; oznacza, że marginesy są
A. równe domyślnym wartościom marginesów elementu, do którego są przypisane.
B. stałe dla danej przeglądarki, niezależnie od rozmiaru jej okna.
C. wyliczane przez przeglądarkę tak, aby element został wyśrodkowany w poziomie.
D. odziedziczone po elemencie rodzica dla danego elementu.
Pytanie z egzaminu CKE, styczeń 2023 (arkusz EE.09-SG-23.01).
W zapisie CSS margin: auto; wartość auto oznacza, że przeglądarka sama oblicza marginesy na podstawie dostępnego miejsca w elemencie nadrzędnym. W typowym układzie blokowym, gdy element ma określoną szerokość, np. width: 800px, a jego rodzic jest szerszy, automatyczne marginesy po lewej i prawej stronie przejmują wolną przestrzeń po równo. Efekt jest taki, że element zostaje wyśrodkowany w poziomie. To jest bardzo często używane przy kontenerach strony, np. wrapper, container albo główna kolumna treści. Moim zdaniem to jedna z tych właściwości CSS, które wyglądają banalnie, ale trzeba znać warunek: element nie może zajmować automatycznie całej dostępnej szerokości, bo wtedy nie zostaje wolne miejsce do rozdzielenia. W praktyce często pisze się width: 90%; max-width: 1200px; margin: auto; i dzięki temu strona dobrze wygląda na różnych ekranach. Zgodnie z zasadami CSS margines auto nie oznacza dziedziczenia ani wartości domyślnej, tylko obliczenie wartości użytej przez silnik renderujący przeglądarki.
Wartość auto przy właściwości margin nie oznacza, że marginesy są dziedziczone po rodzicu. W CSS dziedziczenie dotyczy tylko wybranych właściwości, głównie związanych z tekstem, jak color czy font-family, a marginesy normalnie nie przechodzą automatycznie z elementu nadrzędnego na potomny. To częsty błąd, bo początkujący widzą zależność między elementem a jego kontenerem i zakładają, że wszystkie odstępy są jakby przejmowane. Tak nie jest. Przeglądarka oblicza margines auto na podstawie modelu pudełkowego, szerokości elementu i wolnego miejsca w kontenerze. Nie są to też wartości stałe dla danej przeglądarki. Gdy zmienisz szerokość okna, szerokość rodzica albo szerokość samego elementu, wartości marginesów mogą się zmienić, więc nie ma tu jednej, sztywnej liczby typu zawsze 100 px. Nie chodzi również o powrót do domyślnych marginesów elementu. Domyślne style przeglądarki, czyli user agent stylesheet, mogą nadawać marginesy np. body, p albo h1, ale margin: auto; jest świadomą deklaracją autora CSS i ma inne znaczenie. W normalnym układzie blokowym najważniejszy praktyczny efekt to poziome centrowanie elementu, o ile ma on ustaloną szerokość lub ograniczenie szerokości. Z mojego doświadczenia najlepiej zapamiętać to przez przykład kontenera strony: max-width: 1200px; margin: auto; i od razu widać, że wolne miejsce po bokach rozkłada się równo.