4 zasady, dzięki którym zrozumiesz display block, inline i inline-block
Zaczynaj od selektora znacznika, gdy chcesz ustawić ogólne reguły dla całego dokumentu. Sięgaj po klasę, gdy element ma się powtarzać albo gdy chcesz łączyć kilka niezależnych cech. Zostaw identyfikator do wskazania jednego, niepowtarzalnego miejsca. Trzymanie się tego podziału sprawia, że arkusz stylów rośnie wolniej, a zmiany nie ciągną za sobą lawiny poprawek.<br>
<br>
<br>
<br>
Jak to włączyć w praktyce Najsensowniej zrobić to globalnie, w jednym miejscu arkusza stylów, zanim zacznie się pisać jakiekolwiek reguły dla komponentów. Wystarczy selektor uniwersalny z pseudo-elementami ::before i ::after, ustawiony na box-sizing: border-box. Warto przy okazji ustawić margin: 0 i padding: 0 dla wszystkich elementów, żeby marginesy przeglądarki nie psuły wyrównania. Taki reset na starcie eliminuje najczęstsze źródło różnic między przeglądarkami.<br>
<br>
<br>
<br>
Element z ustawioną szerokością bazową potrafi się skurczyć, gdy w kontenerze flex brakuje miejsca na wszystkie elementy razem. Wartość flex-shrink domyślnie wynosi 1, więc przeglądarka może pomniejszyć każdy element, nawet jeśli w regule CSS widnieje width: 300px. Szerokość bazowa to punkt startowy, a nie gwarancja końcowego rozmiaru.<br>
<br>
<br>
<br>
Zacznij od narysowania siatki na kartce. Policz, ile kolumn ma najszerszy wiersz, i dopiero potem pisz kod. Tabela planu tygodnia najczęściej ma kolumnę na godziny oraz pięć kolumn na dni robocze. To daje sześć kolumn w każdym wierszu. Jeżeli w którymś wierszu scalasz trzy komórki w poziomie, pozostałe komórki muszą sumować się do trzech, nie do sześciu — inaczej przeglądarka dorysuje brakujące pole po prawej stronie i cały układ się przekrzywi.<br>
<br>
<br>
<br>
Zacznij od sprawdzenia, która właściwość faktycznie odpowiada za to, co widzisz. Kolor tekstu ustawia się przez color i ta wartość przechodzi w dół drzewa DOM. Jeśli więc ustawisz color na kontenerze, wszystkie akapity, nagłówki i przyciski bez własnego koloru przyjmą tę barwę. Ramkę definiujesz przez border, border-width, border-style i border-color. Żadna z tych właściwości nie jest dziedziczona — border istnieje tylko na tym elemencie, na którym został zadeklarowany. To nie błąd, to celowy mechanizm CSS.<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>
Uwaga na pułapkę z min-width. Domyślnie element flex ma min-width: auto, co oznacza, że nie może się skurczyć poniżej rozmiaru swojej zawartości. Jeśli w środku siedzi długi, nieprzerwany ciąg znaków albo obrazek o stałej szerokości, element zatrzyma się na tym minimum i zacznie rozpychać kontener. Rozwiązaniem jest min-width: 0 na elemencie flex, który ma się kurczyć poniżej rozmiaru treści. To jedna z najczęściej pomijanych deklaracji przy pracy z flexboxem.<br>
<br>
<br>
<br>
Colspan rozciąga w poziomie, rowspan w pionie — i muszą się zgadzać Colspan mówi, przez ile kolumn ma się rozciągać komórka. Rowspan — przez ile wierszy. W planie tygodnia colspan przydaje się, gdy jedno zadanie trwa od poniedziałku do środy i chcesz je pokazać jako jeden blok. Rowspan działa w drugą stronę: gdy w poniedziałek o dziewiątej zaczynasz coś, co trwa do jedenastej, komórka obejmuje trzy wiersze w kolumnie poniedziałku. Problem pojawia się przy łączeniu obu atrybutów. Komórka z rowspan="2" zajmuje miejsce w dwóch wierszach, więc w drugim wierszu musisz pominąć odpowiednią liczbę komórek — dokładnie tyle, ile wynosi colspan tej komórki z góry.<br>
<br>
<br>
<br>
Inline-block to hybryda. Element nadal ustawia się w linii z innymi, ale zyskuje możliwość ustawiania width, height, margin i padding bez rozrywania układu. Świetnie sprawdza się przy przyciskach, kartach czy elementach nawigacji, które mają stały rozmiar, ale mają stać obok siebie. Uwaga na whitespace w kodzie HTML — spacja między elementami inline-block tworzy dodatkowy odstęp. Można go usunąć, pisząc znaczniki bez odstępu, komentując go albo ustawiając font-size: 0 na rodzicu i przywracając go na dzieciach.<br>
<br>
<br>
<br>
Do diagnozy, dlaczego element się kurczy, użyj narzędzi deweloperskich. Podświetl kontener flex i sprawdź, czy suma baz nie przekracza szerokości rodzica. Zobacz, jakie wartości mają flex-shrink i min-width na poszczególnych elementach. Często wystarczy zmienić jedną z tych dwóch właściwości, aby uzyskać oczekiwany układ bez przepisywania całej struktury.<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.