Rozdział 2 · Zadanie 6

Padding i margin

Dwie właściwości, które łatwo pomylić: odstęp wewnątrz i na zewnątrz.

Wyobraź sobie ramkę jako pudełko

padding — odstęp wewnątrz pudełka, między ramką a tekstem.

margin — odstęp na zewnątrz pudełka, między nim a sąsiednimi elementami.

Zadanie

Dodaj do style.css:

style.css

.box {
  border: 2px solid #0066cc;
  border-radius: 12px;
  padding: 20px;
  margin: 30px;
}

Żeby lepiej zobaczyć różnicę

Dodaj zwykły akapit zaraz pod .box:

styles-demo.html

<p class="box">Ten tekst jest otoczony ramką</p>
<p>A to zwykły tekst zaraz pod ramką</p>

Wskazówka: osobno dla każdej strony

padding-top, padding-right, padding-bottom, padding-left — tak samo dla margin. Jeśli odstęp jest taki sam ze wszystkich stron, prościej pisać jedną linijką.

Jak zapamiętać

padding — «poduszka» wewnątrz pudełka. margin — margines na zewnątrz, jak margines w zeszycie.

Kurs powstał dzięki wsparciu biura rachunkowego Galakton, Białystok, Polska