Zadania margin padding - dodatkowe

Zadania padding margin:

Zadanie 1: Formularz z odstępami między polami

Cel: Nauczyć się używać margin do odstępów między elementami formularza.

Polecenia:

– Stwórz formularz z 4 polami: Imię, Nazwisko, Email, Wiadomość (pole tekstowe).
– Każde pole <input> lub <textarea> umieść w osobnym <div>.
– Dodaj etykiety (<label>) przed każdym polem.
– Ustaw odstęp 20px między kolejnymi divami (użyj margin-bottom).
– Wewnątrz każdego diva, etykieta ma być po lewej, a pole po prawej – użyj padding-left: 10px na polu input.
– Cały formularz ma mieć padding: 30px i obramowanie.

Zadanie 2: Tabela z wyśrodkowanym obrazkiem i odstępami w komórkach

Cel: Użycie padding w komórkach tabeli + margin na obrazku.

Polecenia:

– Stwórz tabelę 3×3.
– W centralnej komórce umieść obrazek (<img>).
– Obrazek ma mieć margin: 15px auto (wyśrodkowanie poziome).
– Wszystkie komórki tabeli mają mieć padding: 20px.
– Komórki z tekstem mają tło szare, centralna – białe.
– Użyj border-collapse: collapse i dodaj obramowania.

Zadanie 3: Galeria zdjęć w pionie z odstępami

Cel: Użycie margin do separacji obrazów w pionie.

Polecenia:

– Stwórz 5 obrazów (<img>) w pionie.
– Każdy obrazek w osobnym <div>.
– Każdy div ma margin-bottom: 25px.
– Obrazki mają width: 300px i display: block; margin: 0 auto.
– Dodaj podpis (<p>) pod każdym obrazkiem z padding: 10px i tłem.
– Całość w kontenerze z padding: 40px.

Zadanie 4: Nagłówek z tekstem i obrazkiem obok (bez float!)

Cel: Użycie padding i margin do stworzenia układu w linii (blokowo).

Polecenia:

– Stwórz nagłówek strony.
– W jednym <div> umieść:

<h1> po lewej
<img> po prawej (logo)

Użyj padding na kontenerze: padding: 20px.
<h1> ma margin: 0.
– Obrazek ma margin-left: 30px i vertical-align: middle
– Kontener ma display: table; width: 100%.

Zadanie 5: Artykuł z cytatem i wcięciem tekstu

Cel: Użycie padding i margin do wyróżnienia cytatu.

Polecenia:

– Stwórz artykuł z 3 akapitami (<p>).
– Wstaw cytat w <blockquote>.

Cytat ma:

– margin: 30px 50px (odstęp z lewej i prawej)
– padding: 20px
– tło jasnoszare
– obramowanie po lewej: 5px solid #ccc

Akapity mają margin-bottom: 15px.
Cały artykuł w kontenerze z padding: 25px.