TablicaPro / karta pracy ucznia / CSS

Model pudełkowy CSS — zadania z margin, padding i border

Klasa: __________ Numer: __________ Data: __________

Pracuj w przygotowanym pliku. Po każdej zmianie zapisz go i sprawdź rezultat.

Kod do rozpoczęcia pracy

.karta {
  width: 300px;
  padding: 20px;
  border: 2px solid #1e3a8a;
}

Zadanie 1

Dopisz regułę .karta z width: 300px, padding: 20px i border: 2px solid #1e3a8a. Oblicz całkowitą szerokość karty, a potem sprawdź ją w narzędziach deweloperskich (F12).

Zadanie 2

Dodaj na początku arkusza *, *::before, *::after { box-sizing: border-box; }. Zmierz kartę ponownie: ile wynosi całkowita szerokość i ile miejsca zostaje na treść?

Zadanie 3

Ustaw margin: 16px auto 24px, tło #ffffff i zaokrąglenie 8px. Sprawdź wyśrodkowanie i odstęp między kartami; wyjaśnij, dlaczego nie wynosi 40 px.

Sprawdź przed oddaniem

Zadanie 1: obliczenie 1 pkt, pomiar 1 pkt; zadanie 2: reguła border-box 1 pkt, szerokości 300 i 256 px 2 pkt; zadanie 3: skrócony margines 1 pkt, wyśrodkowanie 1 pkt, wyjaśnienie 24 px 2 pkt; jednostki 1 pkt. Razem 10 pkt.

Jaką zmianę w kodzie potrafisz samodzielnie wyjaśnić?

Drukuj kartę pracy