Po tej lekcji potrafisz
Odróżnić margin od padding i ograniczyć szerokość treści.
Każdy element tworzy pudełko: treść, wewnętrzny odstęp padding, obramowanie border i zewnętrzny odstęp margin. Przy border-box deklarowana szerokość obejmuje padding oraz border. Dzięki temu karta o szerokości 100% nie wystaje z rodzica po dodaniu wewnętrznych odstępów.
Dodaj reguły do wspólnego arkusza. Maksymalna szerokość ograniczy długie wiersze na monitorze, a padding zostawi oddech na telefonie. Obraz zmniejszy się do szerokości rodzica, zachowując proporcje.
*, *::before, *::after { box-sizing: border-box; }
header, main, footer {
max-width: 68rem;
margin-inline: auto;
padding: 1.5rem;
}
section { margin-block: 2.5rem; }
img { max-width: 100%; height: auto; }
.karta {
padding: 1.5rem;
border: 1px solid #ccd5df;
border-radius: 1rem;
background: white;
}Teraz Twoja kolej
Nadaj sekcji O klubie klasę karta. Zmień jej padding z 1.5rem na 2rem i porównaj położenie tekstu. Potem zmień margin-block.
Sprawdź rozwiązanie i oczekiwany efekt
Padding odsuwa tekst od obramowania; margin odsuwa całą kartę od sąsiednich elementów. Na wąskim ekranie obraz mieści się w treści, a na szerokim treść nie rozciąga się bez końca.
Na co uważać
Sztywne width: 1200px na głównym kontenerze spowoduje poziome przewijanie telefonu. Sama wysokość obrazu też może go zniekształcić.
Zanim przejdziesz dalej: wykonaj ćwiczenie samodzielnie i dopiero wtedy oznacz lekcję jako ukończoną. Oznaczenie zapisuje Twój postęp, nie jest oceną nauczyciela.