Model pudełkowy: margin, padding i border

CSS: odstępy, ramki i układ - HTML i CSS: pierwsze strony (HTML/CSS/JS)

Każdy element to pudełko z warstwami. W środku jest treść, wokół niej padding (wewnętrzny odstęp, ma kolor tła), potem border (ramka), a na zewnątrz margin (przezroczysty odstęp od sąsiadów). Znacznik <div> to puste pudełko blokowe do grupowania treści. width ustala szerokość treści. Ramkę zapisujemy skrótem: grubość, styl, kolor. Zmień padding na 40px i porównaj z margin.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Model pudełkowy</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #eeeeee;
    }
    .pudelko {
      width: 250px;
      padding: 20px;
      border: 4px solid steelblue;
      margin: 30px;
      background-color: white;
    }
  </style>
</head>
<body>
  <div class="pudelko">Jestem pudełkiem: treść, padding, ramka i margines.</div>
  <div class="pudelko">Drugie pudełko jest odsunięte marginesem od pierwszego.</div>
</body>
</html>

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

Wszystkie lekcje kursu HTML i CSS: pierwsze strony · Zaloguj się, aby zapisać postęp na koncie.