Co się dzieje, gdy mylisz margin, padding i border
Border bywa niedoceniany, a potrafi rozwiązać kilka problemów. Obramowanie o grubości 1 px i przezroczystym kolorze rezerwuje miejsce, dzięki czemu element nie przesuwa się po zmianie koloru na widoczny. To przydaje się w przyciskach i polach formularza, gdzie po zaznaczeniu zmieniasz obramowanie. Uwaga na border w połączeniu z paddingiem: jeśli ustawiasz tło elementu, padding je rozszerza, a border rysuje się na zewnątrz tego tła. Kolejność warstw jest stała i nie da się jej zamienić.<br>
<br>
<br>
<br>
Typowy błąd polega na powiększaniu w programie graficznym z włączoną interpolacją i uznaniu, że problem zniknął. Powiększenie wygląda lepiej na ekranie, ale w druku nadal brakuje danych. Drugi częsty błąd to skalowanie w dół i z powrotem w górę — każda taka operacja trwale usuwa szczegóły. Trzeci: zapis do formatu stratnego po każdym powiększeniu, co dokłada kolejne artefakty. Przy rasterze pracuj na kopii, nigdy na pliku źródłowym, i sprawdzaj efekt w docelowym rozmiarze, a nie w widoku dopasowanym do okna.<br>
<br>
<br>
<br>
Typowy błąd to traktowanie section jako uniwersalnego pojemnika na wszystko, co chcemy pogrupować. Nie używaj go do opakowywania listy produktów, menu nawigacyjnego czy stopki. Do takich celów służą odpowiednio listy, nav i footer. Kolejny częsty błąd to zagnieżdżanie article w article bez powodu. Zagnieżdżenie ma sens tylko wtedy, gdy wewnętrzny fragment jest komentarzem lub odpowiedzią na zewnętrzny artykuł. W przeciwnym razie lepiej użyć section albo div.<br>
<br>
<br>
<br>
Zwróć uwagę na jeszcze jedną rzecz: article i section nie zastępują div. Jeśli potrzebujesz zwykłego kontenera do stylowania, użyj div. Nadawanie znaczenia tam, gdzie go nie ma, szkodzi dostępności. Czytniki ekranu ogłaszają liczbę artykułów i sekcji, więc nadmiar tych elementów może zdezorientować użytkownika. Praktyczna zasada: sięgaj po article i section tylko wtedy, gdy naprawdę poprawiają orientację w treści. W wątpliwych przypadkach wybierz prostsze rozwiązanie.<br>
<br>
<br>
<br>
Kiedy klasa wygrywa z identyfikator<br>
<br>
<br>
<br>
Każdy element w dokumencie zajmuje miejsce, które składa się z trzech warstw: zawartości, paddingu, obramowania i marginesu. Zawartość to tekst albo obrazek. Padding to wewnętrzny odstęp między zawartością a obramowaniem. Border to linia oddzielająca element od otoczenia. Margin to zewnętrzny odstęp, który dzieli element od sąsiadów. Model pudełkowy w CSS opisuje dokładnie te warstwy — i to od ich poprawnego ustawienia zależy, czy strona wygląda tak, jak sobie założyłeś.<br>
<br>
<br>
<br>
Rem odnosi się zawsze do rozmiaru czcionki elementu głównego, czyli do tego, co ustawisz na selektorze html. Dzięki temu 2rem znaczy dokładnie to samo w każdym miejscu dokumentu, niezależnie od zagnieżdżenia. To czyni rem przewidywalnym do typografii, nagłówków i odstępów między sekcjami. Praktyczna zasada: ustaw bazę na html font-size: 100% , a konkretne rozmiary opisuj w rem. Wtedy zmiana jednej wartości przeskalowuje cały interfejs.<br>
<br>
<br>
<br>
Praktyczny wybór wygląda tak: rozmiary tekstu i odstępy w rem, odstępy wewnątrz komponentu w em, a piksele zostaw dla obramowań, cieni i elementów, które naprawdę nie mają rosnąć z tekstem. Jeśli chcesz sprawdzić, czy układ jest odporny, ustaw w przeglądarce domyślną czcionkę na bardzo dużą i przejrzyj stronę. Wszystko, co się rozjeżdża, zdradza, gdzie jednostki zostały pomieszane.<br>
<br>
<br>
<br>
Powielanie obrazu do wielkiego formatu najczęściej kończy się rozczarowaniem, bo ludzie nie rozróżniają dwóch zupełnie różnych sposobów zapisu grafiki. Obraz rastrowy to siatka pikseli o ustalonej liczbie kolumn i wierszy. Obraz wektorowy to zbiór punktów, linii i krzywych opisanych matematycznie, przeliczanych na piksele dopiero w chwili wyświetlania lub druku. Ta różnica decyduje o tym, co się stanie, gdy powiększysz plik dziesięciokrotnie.<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>
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.