Utmaning: Förutsäg Sidlayout med Olika Elementtyper

Uppgift

Granska den tillhandahållna HTML-koden och förutsäg hur sidan kommer att se ut i webbläsaren. Det finns tre <div>-element, som vardera innehåller en kombination av ett inline- och ett blockelement.

<div>
  <span>This is an inline element</span>
  This is a block-level element.
</div>

<div>
  This is a block-level element.
  <span>This is an inline element</span>
</div>

<div>
  This is a block-level element.
  <span>This is an inline element</span>
  This is another block-level element.
</div>

Frågor att fundera på

1. Hur kommer inline- och blockelement att samverka inom varje <div>?
2. Hur påverkar ordningen av elementen layouten?
3. Vilken visuell hierarki får inline- och blockelement inom varje <div>?

1. Hur kommer inline- och blockelement att samverka inom varje <div>?
   • I den första och andra <div> visas <span>-elementet (inline) före texten (blockelement);
   • I den tredje <div> är <span>-elementet placerat mitt i texten (blockelement).
2. Hur påverkar ordningen av elementen layouten?
   • I den första <div> kommer texten "This is a block-level element." sannolikt att visas under inline-elementet på grund av <div>-behållarens standardbeteende för blockelement;
   • I den andra <div> är ordningen omvänd, så texten visas sannolikt ovanför inline-elementet;
   • I den tredje <div> är texten och inline-elementet blandade, så layouten kan visa text och inline-element i sekvens.
3. Vilken visuell hierarki får inline- och blockelement inom varje <div>?
   • Inline-elementet (<span>) kommer sannolikt att visas i linje med texten i samtliga fall, men dess position kan variera beroende på ordningen av elementen inom <div>.