InnoMarts logo
InnoMarts
Fast websites
← Back to course

Box Model

Box Model

Witaj ponownie.

W poprzedniej lekcji nauczyłeś się stylować tekst za pomocą kolorów, fontów, rozmiarów i odstępów.

Teraz poznajemy jedną z najważniejszych idei w CSS:

Box model.

Każdy element na stronie internetowej jest traktowany jak pudełko.

Nagłówki?

Pudełko.

Akapity?

Pudełko.

Obrazy?

Pudełko.

Przyciski?

Pudełko.

Ten niewinny mały div?

Zdecydowanie pudełko.

CSS patrzy na twoją stronę i widzi pudełka wszędzie.

Jak kierownik magazynu z opiniami o designie.

Czego Się Nauczysz

W tej lekcji nauczysz się:

Czym Jest Box Model?

CSS box model opisuje, jak działa przestrzeń wokół każdego elementu.

Każde pudełko ma cztery główne części:

Możesz wyobrazić to sobie tak:

margin
  border
    padding
      content

Content to właściwy tekst, obraz albo zawartość elementu.

Padding to przestrzeń wewnątrz elementu.

Border to linia wokół elementu.

Margin to przestrzeń na zewnątrz elementu.

Prosta idea.

Ogromny wpływ.

Jak odkrycie, że twoje problemy z layoutem nie były magią.

To były pudełka.

Pudełka od samego początku.

Stwórz Projekt

Stwórz folder dla tej lekcji:

mkdir css-lesson4
cd css-lesson4
touch index.html
touch style.css

Powinieneś mieć:

css-lesson4/
  index.html
  style.css

Otwórz folder w swoim edytorze.

Zbudujemy małą stronę z cards.

Cards są idealne do nauki box model.

Bo używają padding, margin, border, width i czasem wsparcia emocjonalnego.

Napisz HTML

Otwórz index.html i dodaj to:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Box Model</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <h1>CSS Box Model</h1>
    <p>Każdy element jest pudełkiem. Tak, nawet tamten.</p>
  </header>

  <main class="page">
    <section class="intro-card">
      <h2>Czym Jest Box Model?</h2>
      <p>
        Box model wyjaśnia, jak CSS oblicza rozmiar i odstępy elementów.
      </p>
    </section>

    <section class="cards">
      <article class="card">
        <h2>Content</h2>
        <p>Właściwy tekst, obraz albo zawartość wewnątrz elementu.</p>
      </article>

      <article class="card">
        <h2>Padding</h2>
        <p>Przestrzeń między zawartością a border.</p>
      </article>

      <article class="card">
        <h2>Border</h2>
        <p>Linia wokół padding i content.</p>
      </article>

      <article class="card">
        <h2>Margin</h2>
        <p>Przestrzeń na zewnątrz elementu.</p>
      </article>
    </section>
  </main>

  <footer class="site-footer">
    <p>Stworzone podczas nauki CSS box model.</p>
  </footer>
</body>
</html>

To daje nam:

Teraz możemy stylować pudełka.

I tak, wreszcie zrozumiemy, dlaczego jeden margin potrafi zepsuć poranek.

Zacznij od Podstawowych Stylów

Otwórz style.css i dodaj:

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

.site-header {
  background-color: #111827;
  color: white;
  text-align: center;
  padding: 48px 24px;
}

.page {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

To tworzy podstawowy layout strony.

Zwróć uwagę:

margin: 40px auto;

To centruje container .page poziomo.

40px dodaje przestrzeń pionową.

auto obsługuje przestrzeń po lewej i prawej stronie.

CSS mówi:

“Pozwól mi obliczyć boki.”

I tym razem CSS jest pomocny.

Rzadki moment. Szanujemy.

Content

Content to wewnętrzna część elementu.

Na przykład:

<article class="card">
  <h2>Content</h2>
  <p>Właściwy tekst, obraz albo zawartość wewnątrz elementu.</p>
</article>

Tekst w środku card to content.

W CSS width i height zwykle opisują rozmiar obszaru content.

Przykład:

.card {
  width: 300px;
}

To oznacza, że obszar content ma szerokość 300px.

Ale jest mały problem.

Padding i border mogą zwiększyć końcowy widoczny rozmiar.

Bo CSS lubi niespodzianki.

Nie zawsze dobre niespodzianki.

Padding

Padding to przestrzeń wewnątrz elementu.

Tworzy oddech między content a border.

Dodaj to:

.card {
  background-color: white;
  padding: 24px;
}

Teraz content nie dotyka krawędzi.

Dużo lepiej.

Bez padding tekst siedzi zbyt blisko border.

Jak ktoś, kto stoi za blisko i tłumaczy JavaScript closures.

Padding sprawia, że wszystko jest wygodniejsze.

Możesz ustawić padding dla wszystkich stron:

padding: 24px;

Albo osobno:

padding-top: 20px;
padding-right: 24px;
padding-bottom: 20px;
padding-left: 24px;

Możesz też użyć shorthand:

padding: 20px 24px;

To oznacza:

Bardzo przydatne.

Bardzo częste.

Border

Border to linia wokół elementu.

Dodaj to:

.card {
  background-color: white;
  padding: 24px;
  border: 2px solid #e5e7eb;
}

Border ma trzy części:

border: width style color;

Przykład:

border: 2px solid #e5e7eb;

To oznacza:

Możesz tworzyć różne style border:

border: 2px solid #2563eb;
border: 2px dashed #f97316;
border: 2px dotted #16a34a;

Borders są przydatne do oddzielania treści.

Ale nie dodawaj border wszędzie.

Za dużo borders sprawia, że strona wygląda jak spreadsheet po załamaniu nerwowym.

Border Radius

Property border-radius zaokrągla rogi.

Dodaj:

.card {
  background-color: white;
  padding: 24px;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
}

Teraz cards wyglądają miękko.

Mniej ostro.

Mniej jak oficjalny dokument z 2004 roku.

Możesz używać małych albo dużych wartości:

border-radius: 8px;
border-radius: 16px;
border-radius: 999px;

999px jest często używane dla przycisków w kształcie pill.

Przycisk staje się okrągły i przyjazny.

Jakby chciał być kliknięty grzecznie.

Margin

Margin to przestrzeń na zewnątrz elementu.

Dodaj to:

.card {
  background-color: white;
  padding: 24px;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
  margin-bottom: 20px;
}

Teraz między cards jest przestrzeń.

Margin oddziela elementy od siebie.

Padding tworzy komfort wewnętrzny.

Margin tworzy dystans zewnętrzny.

Ważna różnica.

Padding mówi:

“Daj przestrzeń mojej treści wewnątrz mnie.”

Margin mówi:

“Daj mi przestrzeń od innych.”

Oba są potrzebne.

Bardzo ludzkie, właściwie.

Width i Height

Możesz kontrolować rozmiar elementów za pomocą width i height.

Przykład:

.card {
  width: 300px;
}

Ale uważaj na fixed widths.

Stałe szerokości mogą powodować problemy na małych ekranach.

Często lepiej użyć:

.card {
  max-width: 300px;
}

Albo dla containerów:

.page {
  max-width: 900px;
}

max-width oznacza:

Nie bądź szerszy niż to, ale możesz być mniejszy, jeśli trzeba.

To przydatne dla responsive design.

Browser dostaje miejsce do oddychania.

A twój layout nie eksploduje na telefonach.

Zawsze dobra rzecz.

Problem z Box-Sizing

Domyślnie CSS używa:

box-sizing: content-box;

To oznacza:

Przykład:

.card {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
}

Końcowa widoczna szerokość staje się:

300px content
+ 40px padding
+ 4px border
= 344px total width

To zaskakuje wielu początkujących.

I niektórych doświadczonych developerów.

I prawdopodobnie jedną osobę w piwnicy, która nadal debugguje layout z 2016 roku.

Użyj border-box

Większość nowoczesnych projektów CSS używa tego:

* {
  box-sizing: border-box;
}

Dodaj to na początku CSS:

* {
  box-sizing: border-box;
}

Teraz width zawiera:

To sprawia, że rozmiary są łatwiejsze.

Jeśli napiszesz:

.card {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
}

Końcowa widoczna szerokość zostaje 300px.

Dużo bardziej przewidywalne.

CSS staje się trochę mniej chaotyczny.

Doceniamy ten rzadki moment.

Wystylizuj Layout Cards

Dodaj to:

.cards {
  display: grid;
  gap: 20px;
}

Nie martw się jeszcze za bardzo o Grid.

Będziemy go studiować później.

Na razie zapamiętaj:

gap: 20px;

tworzy przestrzeń między cards.

Często jest to czystsze niż używanie wielu margins.

Teraz zaktualizuj styl card:

.card {
  background-color: white;
  padding: 24px;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
}

Ponieważ .cards używa gap, nie potrzebujemy margin-bottom na każdej card.

Czyściej.

Bardziej uporządkowanie.

Mniej CSS spaghetti.

Wystylizuj Intro Card

Dodaj:

.intro-card {
  background-color: #eff6ff;
  padding: 32px;
  border-left: 6px solid #2563eb;
  border-radius: 16px;
  margin-bottom: 24px;
}

Ta intro card używa:

To box model w praktyce.

Nie teoria.

Prawdziwy layout.

Pudełko weszło do budynku.

Pełny CSS

Twój style.css powinien wyglądać tak:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

.site-header {
  background-color: #111827;
  color: white;
  text-align: center;
  padding: 48px 24px;
}

.page {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

.intro-card {
  background-color: #eff6ff;
  padding: 32px;
  border-left: 6px solid #2563eb;
  border-radius: 16px;
  margin-bottom: 24px;
}

.cards {
  display: grid;
  gap: 20px;
}

.card {
  background-color: white;
  padding: 24px;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
}

.card h2 {
  margin-top: 0;
}

.card p,
.intro-card p {
  color: #374151;
  font-size: 18px;
  line-height: 1.7;
}

.site-footer {
  text-align: center;
  padding: 24px;
  color: #6b7280;
}

Zapisz plik.

Odśwież przeglądarkę.

Teraz powinieneś zobaczyć czyste odstępy i strukturę cards.

To box model działa.

Cicho.

Za kulisami.

Jak ekipa techniczna przebrana za CSS properties.

Częste Błędy

Mylenie margin i padding

Padding jest w środku.

Margin jest na zewnątrz.

Przykład:

.card {
  padding: 24px;
  margin-bottom: 20px;
}

padding daje przestrzeń wewnątrz card.

margin-bottom daje przestrzeń po card.

Jeśli tekst jest zbyt blisko krawędzi card, użyj padding.

Jeśli cards są zbyt blisko siebie, użyj margin albo gap.

Proste.

Ale łatwo pomylić.

CSS lubi testować koncentrację.

Zapomnienie box-sizing

Bez tego:

* {
  box-sizing: border-box;
}

Szerokości mogą stać się zaskakujące.

Używaj border-box w większości projektów.

Dzięki temu layouty są łatwiejsze do zrozumienia.

Twoje przyszłe ja ci podziękuje.

Może nawet kawą.

Dodawanie zbyt dużego margin wszędzie

Źle:

h1 {
  margin: 50px;
}

p {
  margin: 50px;
}

.card {
  margin: 50px;
}

Za dużo margin wszędzie tworzy chaos.

Używaj spacingu świadomie.

Nie jak rzucanie poduszek do pokoju z zamkniętymi oczami.

Praktyka

Stwórz stronę z:

Wystylizuj każdą card za pomocą:

Użyj:

box-sizing: border-box;

na początku CSS.

Potem eksperymentuj z:

Obserwuj, jak zmienia się layout.

CSS staje się mniej straszny, kiedy widzisz, co robi każda property.

Mini Wyzwanie

Stwórz trzy pricing cards:

Każda card powinna mieć:

Użyj box model, żeby je wystylizować:

Spraw, żeby Premium card wyróżniała się innym kolorem border.

Nie za bardzo.

Tylko tyle, żeby powiedzieć:

“Jestem specjalna.”

Nie:

“Uciekłam z plakatu karnawałowego.”

Podsumowanie

Dzisiaj nauczyłeś się, że:

Box model jest wszędzie.

Jeśli go rozumiesz, CSS staje się dużo łatwiejszy.

Jeśli go ignorujesz, twoje layouty będą zachowywać się jak zbuntowane meble.

A w życiu mamy już wystarczająco zbuntowanych mebli.

Następna Lekcja

W następnej lekcji nauczymy się Flexbox.

Flexbox pomaga wyrównywać i organizować elementy w jednym kierunku.

Rows.

Columns.

Wyśrodkowane rzeczy.

Wreszcie CSS pomoże nam ustawiać elementy bez przywoływania starożytnych duchów.