Display

Grundläggande display

• Inline: Elementet flödar horisontellt med omgivande text.
• Block: Elementet tar upp hela bredden av tillgängligt utrymme och skapar en ny rad.
• Inline-block: Kombinerar egenskaperna hos inline och blockelement.
• None: Döljer elementet.
• Table: Presenterar element som rader och kolumner.
• Flex: Använder en flexibel layoutmodell för att ordna element horisontellt eller vertikalt.
• Grid: Använder ett rutnätsbaserat system för att ordna element.

Kontrollera hur ett element visas

Använd CSS-egenskapen display för att ange hur ett element ska visas.

element {
  display: inline;
}

Exempel:

<p>Inline-text <span>Inline-block-span</span> Block-div</p>

span {
  display: inline-block;
}

div {
  display: block;
}

Resultat:

• "Inline-text" flödar horisontellt med texten.
• "Inline-block-span" tar upp tillgängligt horisontellt utrymme men bryter inte raden.
• "Block-div" tar upp hela bredden och skapar en ny rad.

För bättre tillgänglighet:

• Använd displayvärden som förbättrar skärmläsarens läsordning.
• Använd flexbox eller grid för att skapa flexibla layouter som anpassar sig till olika skärmstorlekar.