Box Model i display
margin, padding, border i jak wpływają na rozmiar elementu
Box Model — każdy element to pudełko
Każdy element HTML to prostokątne pudełko z czterema warstwami: 1. **Content** — zawartość (tekst, obrazy) 2. **Padding** — wewnętrzna przestrzeń między zawartością a ramką 3. **Border** — ramka wokół paddingu 4. **Margin** — zewnętrzna przestrzeń od innych elementów Jak prezent: tekst na kartce (content) → pianka ochronna (padding) → pudełko (border) → wolna przestrzeń do następnego elementu (margin).
Skrót ze spacjami: jedna wartość = wszystkie strony, dwie = góra/dół i prawa/lewa, cztery = góra zgodnie z ruchem wskazówek zegara.
box-sizing: border-box — najważniejsza reguła
Problem bez border-box:
.box { width: 300px; padding: 20px; border: 2px solid; }
/* Rzeczywista szerokość = 300 + 20*2 + 2*2 = 344px — nieoczekiwane! */Rozwiązanie — border-box:
* { box-sizing: border-box; }
.box { width: 300px; padding: 20px; border: 2px solid; }
/* Rzeczywista szerokość = 300px — padding i border są wewnątrz */Z border-box ustawiona szerokość to faktyczna szerokość. Zawsze dodawaj tę regułę!
display — typ bloku
block— zajmuje całą szerokość linii, pełny blok (div,p,h1)inline— zajmuje tylko szerokość zawartości, brak szerokości/wysokości (span,a,strong)inline-block— jak inline, ale można ustawiać szerokość/wysokośćnone— ukrywa element całkowicie
Scalanie marginesów: gdy dwa elementy blokowe są ułożone pionowo — ich górne i dolne marginesy łączą się w jeden (większy). Na przykład margin-bottom: 20px na p i margin-top: 30px na następnym p daje 30px odstępu, nie 50px. Rozwiązanie: używaj marginesu tylko na dole lub tylko na górze.
max-width: 1200px + margin: 0 auto — standardowy wzorzec dla wyśrodkowanego kontenera.