Czy zagnieżdżone listy dziedziczą znaczniki po elemencie nadrzędnym?
Co działa, a co nie działa z pliku lokalnego Strona otwarta przez file:// może wyświetlać tekst, obrazy, style CSS i skrypty JavaScript, jeśli leżą w tym samym folderze i są podlinkowane ścieżkami względnymi. Nie zadziałają natomiast mechanizmy wymagające serwera: pobieranie danych z zewnętrznych adresów przez zapytania sieciowe, moduły JavaScript ładowane z plików lokalnych w niektórych przeglądarkach, pliki cookie w pełnym zakresie czy odwołania do ścieżek zaczynających się od ukośnika. Jeśli strona korzysta z takich funkcji, dwuklik nie wystarczy — potrzebny będzie lokalny serwer uruchamiany z katalogu projektu.<br>
<br>
<br>
<br>
Domyślnie przeglądarki liczą szerokość elementu inaczej, niż podpowiada intuicja. Ustawiasz width: 300px, dodajesz padding: 20px i border: 5px, a element zajmuje na stronie 350 pikseli. Wszystko przez model content-box, w którym szerokość dotyczy wyłącznie zawartości, a padding i obramowanie dokładają się obok. Stąd bierze się większość problemów z rozjeżdżającymi się kolumnami i elementami wychodzącymi poza kontener.<br>
<br>
<br>
<br>
Chcesz rozdzielić marginesy? Wstaw między bloki coś, co je fizycznie oddzieli: obramowanie, wypełnienie albo przerwę w przepływie dokumentu. Pamiętaj jednak, że dowolny z tych dodatków wpływa na szerokość i wysokość, więc przy układach opartych na procentach sprawdź, czy nie rozjedzie się siatka. Alternatywa to przejście na odstępy oparte wyłącznie na jednym marginesie — wtedy wynik jest przewidywalny, a ty nie musisz pamiętać o kolejności bloków.<br>
<br>
<br>
<br>
Kolejny typowy problem to gubienie znaczników przy użyciu list-style: none na liście nadrzędnej. Jeśli chcesz, aby zagnieżdżona lista nadal miała widoczne punktory, musisz je przywrócić jawnie, np. ul ul list-style: disc; . Inaczej cała struktura straci oznaczenia. Podobnie dzieje się przy używaniu display: flex lub grid na elemencie li – to zaburza domyślne renderowanie znaczników, bo lista przestaje być traktowana jako lista. W takich przypadkach punktory znikają, a ich przywrócenie wymaga dodatkowych zabiegów, np. użycia pseudoelementów ::before.<br>
<br>
<br>
<br>
Rozwiązaniem jest box-sizing: border-box. Po jego ustawieniu podana szerokość obejmuje już zawartość, padding i obramowanie razem. Element z width: 300px, padding: 20px i border: 5px nadal zajmuje dokładnie 300 pikselów, a jego zawartość kurczy się do wnętrza. To odwraca logikę na korzyść projektowania: ustalasz rozmiar zewnętrzny i nie musisz już odejmować w głowie paddingu przy każdym obliczeniu.<br>
<br>
<br>
<br>
Praktyczna wskazówka: zamiast polegać na dziedziczeniu, zawsze jawnie definiuj style dla każdego poziomu zagnieżdżenia. Używaj selektorów potomstwa, takich jak ul >li czy ol ol, aby uniknąć niekontrolowanego rozprzestrzeniania się reguł. Pamiętaj też, że znaczniki listy można w pełni kontrolować przez list-style-type, list-style-image i list-style-position. Testowanie w różnych przeglądarkach jest konieczne, bo domyślne style bywają niespójne. Świadome zarządzanie dziedziczeniem pozwala uniknąć wizualnego chaosu i zapewnia przewidywalny wygląd nawet przy głęboko zagnieżdżonych strukturach.<br>
<br>
<br>
<br>
Kolejna różnica to rola w nawigacji. article często staje się osobnym elementem w strukturze dokumentu — może być linkowany, udostępniany. section służy do dzielenia treści wewnątrz article lub main, np. na rozdziały. Jeśli zastanawiasz się, czy dany blok mógłby istnieć jako oddzielna strona, prawdopodobnie powinien być article. W przeciwnym razie to section.<br>
<br>
<br>
<br>
Kiedy marginesy faktycznie się zapadaj<br>
<br>
<br>
<br>
Najczęstszy błąd polega na próbie nadpisania stylów dla zagnieżdżonej listy poprzez selektor odnoszący się do listy nadrzędnej. Przykładowo, reguła ul list-style-type: square; zadziała na wszystkie listy nienależące do innych selektorów, ale jeśli chcesz zmienić znacznik tylko dla listy zagnieżdżonej, musisz użyć bardziej precyzyjnego zapisu, np. ul ul list-style-type: circle; . Warto pamiętać, że przeglądarki domyślnie stosują różne znaczniki dla kolejnych poziomów: pierwszy poziom to zwykle dysk, drugi – okrąg, trzeci – kwadrat. Nie ma jednak gwarancji, że każda przeglądarka robi to identycznie.<br>
<br>
<br>
<br>
Jak przewidzieć wynik i gdzie to boli Przy dwóch marginesach dodatnich wygrywa większy. Przy liczbach ujemnych wygrywa ten o większej wartości bezwzględnej, czyli bardziej „wciąga" element. Gdy jeden margines jest dodatni, a drugi ujemny, wartości się dodają: 30 pikseli i minus 10 pikseli daje 20 pikseli odstępu. Zasada jest jedna, ale konsekwencje zależą od kontekstu — dlatego warto sprawdzać układ w narzędziach deweloperskich, zamiast zgadywać z arkusza stylów.<br>
<br>
<br>
<br>
Podsumowując: article to samodzielna jednostka treści, section to tematyczny fragment większej całości. Stosuj je zgodnie z przeznaczeniem, a unikniesz problemów z semantyką i dostępnością. Pamiętaj, że div nadal jest przydatny, gdy potrzebujesz zwykłego pojemnika bez znaczenia semantycznego.