TablicaPro / karta pracy ucznia / CSS

display: block, inline i inline-block — lekcja z przykładami

Klasa: __________ Numer: __________ Data: __________

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

Kod do rozpoczęcia pracy

.inline { display: inline; width: 200px; padding: 10px; }
.inline-block { display: inline-block; width: 200px; padding: 10px; }

Zadanie 1

Ustaw display: block dla .blok. Zmierz szerokość obu bloków i sprawdź, że każdy zaczyna się w nowej linii.

Zadanie 2

Nadaj .inline display: inline, szerokość 200 px i padding 10 px. Nadaj .inline-block te same wartości z display: inline-block. Zmierz szerokość i wyjaśnij różnicę.

Zadanie 3

Ukryj .ukryty-v przez visibility: hidden, a .ukryty-n przez display: none. Porównaj szerokość obu ukrytych elementów oraz położenie słowa po w obu akapitach i wyjaśnij.

Sprawdź przed oddaniem

Zadanie 1: display block 1 pkt, pomiar i nowa linia 1 pkt; zadanie 2: dwie reguły 2 pkt, pomiar i wyjaśnienie 2 pkt; zadanie 3: dwa sposoby ukrycia 1 pkt, porównanie i wyjaśnienie 2 pkt; poprawny zapis CSS 1 pkt. Razem 10 pkt.

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

Drukuj kartę pracy