Analizując poniższy kod HTML, jak w przeglądarce zachowa się blok B względem bloku A?<div>A</div> <div style="margin-top: 20px">B</div>

bloki A i B będą nachodzić na siebie

zostanie ustawiony dolny margines bloku B

blok A zostanie przesunięty w lewo o 20 px

W jakim zawodzie przydaje się ta wiedza?

Wiedza ta jest potrzebna w zawodach: TECHNIK INFORMATYK oraz TECHNIK PROGRAMISTA.

Gdzie mogę przećwiczyć więcej pytań z kwalifikacji INF.03?

Więcej pytań z kwalifikacji INF.03 znajdziesz na Zawodowe.edu.pl - darmowa baza pytań CKE z symulatorem egzaminu.

Analizując poniższy kod HTML... - INF.03

Q: Do jakiej kwalifikacji zawodowej należy to pytanie?

To pytanie pochodzi z kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych. Wymagana w zawodach: Technik informatyk, Technik programista.

Tryb nauki (pokaż prawidłową odpowiedź)

Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Zawód: Technik informatyk, Technik programista

Kategorie: Tworzenie stron WWW Systemy CMS i narzędzia webowe

Słowa kluczowe: CSS CSS margin Elementy blokowe i liniowe w HTML Jednostki miary w CSS

Analizując poniższy kod HTML, jak w przeglądarce zachowa się blok B względem bloku A?

<div>A</div>
<div style="margin-top: 20px">B</div>

Dobrze. margin-top: 20px dodaje 20 px odstępu nad blokiem B, odsuwając go od A.

Źle. Margines tworzy odstęp, a nie nakładanie elementów.

Źle. To margines pionowy (górny), a nie przesunięcie w poziomie.

Źle. margin-top to margines GÓRNY, nie dolny.

Drugi <div> (blok B) ma w atrybucie style ustawione margin-top: 20px - to margines zewnętrzny po GÓRNEJ stronie. Ponieważ blok B leży pod blokiem A, ten 20-pikselowy margines tworzy odstęp nad B, odsuwając go w dół od A. Dlatego blok B będzie oddalony od bloku A o 20 px.

Pozostałe odpowiedzi błędnie odczytują działanie margin-top. To margines GÓRNY, więc odstęp powstaje nad elementem, a nie pod nim. Jest to margines pionowy, więc nie przesuwa bloku w lewo (do tego służyłby margin-left). Margines tworzy wolną przestrzeń, a nie nakładanie - nic na siebie nie nachodzi. Ustawiony nad blokiem B margin-top: 20px odsuwa go od bloku A o 20 px.

Pytania pomocnicze (7)

Co oznacza zapis CSS `margin-top: 20px`?

Oznacza ustawienie górnego marginesu zewnętrznego elementu na 20 pikseli. Element zostanie odsunięty od obiektu znajdującego się nad nim.

Dlaczego w podanym kodzie blok B jest oddalony od bloku A?

Drugi element `div` ma styl `margin-top: 20px`, który dodaje odstęp nad tym elementem. Ponieważ elementy `div` są blokowe, układają się jeden pod drugim.

Jaka jest różnica między `margin` a `padding`?

`margin` określa odstęp na zewnątrz elementu, a `padding` odstęp wewnątrz elementu. `padding` oddziela treść od obramowania, a `margin` oddziela element od innych elementów.

Jak zachowuje się element `div` w układzie strony HTML?

`div` jest domyślnie elementem blokowym. Zajmuje całą dostępną szerokość i kolejny element blokowy zwykle pojawia się pod nim.

Czy `margin-top` przesuwa poprzedni element?

Nie. `margin-top` dotyczy elementu, któremu został przypisany. W przykładzie właściwość działa na blok B, odsuwając go od bloku A.

Co oznacza jednostka `px` w CSS?

`px` oznacza piksele, czyli jedną z najczęściej używanych jednostek długości w CSS. Wartość `20px` oznacza odstęp o wielkości 20 pikseli CSS.

Czy bloki A i B będą się na siebie nakładać przy `margin-top: 20px`?

Nie. Dodatni margines górny zwiększa odstęp między elementami. Nakładanie mogłoby wystąpić np. przy pozycjonowaniu lub ujemnych marginesach.

Analizując poniższy kod HTML, jak w przeglądarce zachowa się blok B względem bloku A?
<div>A</div> <div style="margin-top: 20px">B</div>

Wymagane logowanie

Zgłoś błąd w pytaniu