Box model, odstępy i rozmiary elementów

Cele lekcji

Po ukończeniu tej lekcji będziesz umieć:

• wyjaśnić, czym jest box model i z jakich części składa się element,
• odróżnić content, padding, border i margin,
• ustawić box-sizing: border-box i zrozumieć, dlaczego ułatwia budowanie layoutu,
• korzystać z width, max-width, height i min-height bez blokowania responsywności,
• planować odstępy tak, aby interfejs był czytelny i spójny.

Czym jest box model?

Każdy element HTML jest traktowany przez przeglądarkę jak prostokątne pudełko. Nawet tekst, link, karta produktu czy cała sekcja strony mają swoje miejsce, rozmiar i odstępy. Box model opisuje, z czego składa się to pudełko.

Myśl o elemencie jak o karcie: w środku jest treść, wokół treści możesz dodać oddech, następnie obramowanie, a na zewnątrz odstęp od innych elementów.

Content, padding, border i margin

Box model składa się z czterech warstw. Każda odpowiada za inny rodzaj przestrzeni.

• content to właściwa treść elementu: tekst, obraz, ikona albo formularz.
• padding to odstęp wewnętrzny między treścią a krawędzią elementu.
• border to obramowanie elementu.
• margin to odstęp zewnętrzny między elementem a jego otoczeniem.

.lesson-card {
  padding: 1.5rem;
  border: 1px solid #dbe2f1;
  margin-bottom: 1rem;
}

W tym przykładzie treść karty nie dotyka obramowania dzięki padding, a kolejne elementy nie przyklejają się do karty dzięki margin-bottom.

box-sizing: border-box

Domyślnie CSS liczy szerokość elementu w sposób, który bywa zaskakujący dla początkujących: width obejmuje tylko treść, a padding i border zwiększają całkowity rozmiar pudełka.

Dlatego w nowoczesnych projektach bardzo często stosuje się globalną regułę:

* {
  box-sizing: border-box;
}

Dzięki temu deklaracja width: 300px oznacza całkowitą szerokość elementu razem z paddingiem i obramowaniem. Layout jest łatwiejszy do przewidzenia.

width, max-width, height i min-height

Rozmiary w CSS warto ustawiać elastycznie. Stała szerokość może wyglądać dobrze na dużym ekranie, ale na telefonie łatwo zepsuje układ. Dlatego często lepiej łączyć width z max-width.

.container {
  width: 100%;
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

Taki kontener może zwężać się na małych ekranach, ale nie rośnie bez końca na dużych monitorach.

Z wysokością zachowaj ostrożność. height wymusza konkretną wysokość i może obcinać treść, gdy tekstu będzie więcej. min-height ustala minimalną wysokość, ale pozwala elementowi urosnąć, jeśli treść tego wymaga.

Margin kontra padding

Najprostsze rozróżnienie brzmi: padding buduje przestrzeń wewnątrz elementu, a margin odsuwa element od innych elementów.

• Użyj padding, gdy treść potrzebuje oddechu wewnątrz karty, przycisku lub sekcji.
• Użyj margin, gdy chcesz zwiększyć odległość między sąsiednimi blokami.
• Nie używaj dużego paddingu tylko po to, aby odsunąć cały element od innych elementów.

.button {
  padding: 0.75rem 1rem;
}

.section {
  margin-top: 3rem;
}

Odstępy między elementami

Spójne odstępy sprawiają, że strona wygląda spokojniej i czyta się ją szybciej. Zamiast wpisywać przypadkowe wartości, korzystaj z prostego rytmu, np. 0.5rem, 1rem, 1.5rem, 2rem.

W komponentach opartych o flexbox lub grid bardzo wygodne jest gap, bo opisuje odstęp między elementami bez dokładania marginesów do każdego dziecka.

.card-list {
  display: grid;
  gap: 1rem;
}

To czytelniejsze niż ręczne dodawanie margin-bottom do wszystkich kart i usuwanie marginesu z ostatniej.

Przykład karty

Poniżej mały przykład HTML i CSS, który łączy box model, odstępy i elastyczną szerokość.

Kopiuj<article class="profile-card">
  <p class="profile-card__label">Mini komponent</p>
  <h2>Karta kursu CSS</h2>
  <p>Krótki opis lekcji, który ma wygodny odstęp od krawędzi karty.</p>
</article>

.profile-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 28rem;
  margin: 2rem auto;
  padding: 1.5rem;
  border: 1px solid #dbe2f1;
  border-radius: 12px;
  background-color: #ffffff;
}

Dobre praktyki

• Ustaw box-sizing: border-box globalnie na początku arkusza stylów.
• Preferuj max-width zamiast sztywnej szerokości, gdy element ma działać na wielu ekranach.
• Nie ustawiaj height na tekstowych kartach, jeśli nie masz konkretnego powodu. Częściej wybieraj min-height.
• Stosuj jeden rytm odstępów w całym projekcie, aby interfejs nie wyglądał przypadkowo.
• Do odstępów w listach kart, paskach narzędzi i gridach używaj gap, gdy układ na to pozwala.

Mini zadanie

Utwórz kartę informacyjną z nagłówkiem, krótkim tekstem i linkiem. Następnie w CSS:

• dodaj padding, aby treść nie dotykała krawędzi,
• ustaw border, aby zobaczyć granice elementu,
• dodaj margin, aby odsunąć kartę od innych elementów,
• ustaw width: 100% i max-width, aby karta była responsywna,
• zmień wartości paddingu, bordera, marginesu i max-width, a potem sprawdź, jak wpływają na układ.

Na koniec odpowiedz sobie na pytanie: które odstępy należą do wnętrza komponentu, a które opisują jego relację z otoczeniem?

Podsumowanie lekcji

Wiesz już, że każdy element jest pudełkiem z treścią, paddingiem, obramowaniem i marginesem. Rozumiesz, dlaczego box-sizing: border-box ułatwia przewidywanie szerokości oraz kiedy wybierać padding, margin, max-width i min-height.

Kolejny krok: sprawdź, jak właściwość display decyduje o tym, czy element zachowuje się jak blok, tekst w linii czy mały komponent w tekście.