Model pudełkowy

Układ strony w CSS: odstępy, ramki i kolumny - Informatyka - liceum klasa 2 (HTML/CSS/JS)

Każdy element strony to **pudełko**: treść, wokół niej wewnętrzny odstęp `padding`, ramka `border` i zewnętrzny odstęp `margin`. Domyślnie `width` to szerokość samej treści; `box-sizing: border-box` wlicza w nią odstęp i ramkę, co ułatwia liczenie. `border-radius` zaokrągla rogi. Treść wyśrodkowuje się ograniczeniem szerokości (`max-width`) i automatycznymi marginesami po bokach (`margin: 0 auto`).

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Karty</title>
  <style>
    * {
      box-sizing: border-box;
    }
    main {
      max-width: 600px;
      margin: 0 auto;
    }
    .karta {
      border: 2px solid #6366f1;
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 16px;
    }
  </style>
</head>
<body>
  <main>
    <div class="karta">
      <h2>Python</h2>
      <p>Programy w konsoli i na planszy.</p>
    </div>
    <div class="karta">
      <h2>SQL</h2>
      <p>Kwerendy do bazy biblioteki.</p>
    </div>
    <div class="karta">
      <h2>HTML</h2>
      <p>Strona koła informatycznego.</p>
    </div>
  </main>
</body>
</html>

Ładowanie interaktywnego edytora... Jeśli się nie pojawi, włącz JavaScript.

Wszystkie lekcje kursu Informatyka - liceum klasa 2·Zaloguj się, aby zapisać postęp na koncie.