Model pudełkowy: margin, padding, border

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

Każdy element strony to **pudełko**. Od środka: - treść (tekst, obrazek), - `padding`: wewnętrzny odstęp między treścią a ramką, - `border`: ramka, np. `2px solid navy`, - `margin`: zewnętrzny odstęp od innych elementów. `<div>` to puste pudełko do grupowania, a `class="card"` nadaje mu klasę: w CSS wybiera się ją selektorem `.card`. `border-radius` zaokrągla rogi.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Góry</title>
  <style>
    .card {
      border: 2px solid #6366f1;
      border-radius: 8px;
      padding: 12px;
      margin: 12px;
    }
  </style>
</head>
<body>
  <div class="card">
    <h2>Rysy</h2>
    <p>Najwyższy szczyt Polski, 2499 m.</p>
  </div>
  <div class="card">
    <h2>Śnieżka</h2>
    <p>Najwyższy szczyt Karkonoszy, 1603 m.</p>
  </div>
  <div class="card">
    <h2>Babia Góra</h2>
    <p>Królowa Beskidów, 1725 m.</p>
  </div>
</body>
</html>

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

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