Utfordring: Forutsi Sidelayout med Ulike Elementtyper

Oppgave

Undersøk den medfølgende HTML-koden og forutsi hvordan siden vil se ut i nettleseren. Det er tre <div>-elementer, hver inneholder en kombinasjon av et inline- og et blokk-nivå-element.

<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>

Spørsmål å vurdere

1. Hvordan vil inline- og blokk-nivå-elementene samhandle innenfor hver <div>?
2. Hvordan vil rekkefølgen på elementene påvirke oppsettet?
3. Hva vil være den visuelle hierarkiet mellom inline- og blokk-nivå-elementene i hver <div>?

1. Hvordan vil inline- og blokk-nivå-elementene samhandle innenfor hver <div>?
   • I den første og andre <div> vises <span>-elementet (inline) før teksten (blokk-nivå);
   • I den tredje <div> er <span>-elementet plassert mellom teksten (blokk-nivå).
2. Hvordan vil rekkefølgen på elementene påvirke oppsettet?
   • I den første <div> vil teksten "This is a block-level element." sannsynligvis vises under inline-elementet på grunn av standard blokk-nivå oppførsel for <div>-beholderen;
   • I den andre <div> er rekkefølgen motsatt, så teksten vil sannsynligvis vises over inline-elementet;
   • I den tredje <div> er teksten og inline-elementet blandet, så oppsettet vil sannsynligvis vise teksten og inline-elementet i rekkefølge.
3. Hva vil være det visuelle hierarkiet mellom inline- og blokk-nivå-elementene i hver <div>?
   • Inline-elementet (<span>) vil sannsynligvis vises på linje med teksten i alle tilfeller, men posisjonen kan variere avhengig av rekkefølgen på elementene i <div>.