Display

I denna lektionen får du lära dig hur egenskapen display fungerar.

Det är inte ofta som man ändrar en tags display-egenskap, men det är fullt möjligt, och i vissa fall till och med användbart.

Så, vad gör egentligen egenskapen display? Jo, en del taggar, till exempel <h1> och <p>, sätter alltid in ett radbyte före och efter sig. Det gör till exempel inte <b> och <i>.

HTML - HyperText Markup Language
<h1>En rubrik, sedan radbyte</h1> <p>En paragraf, sedan radbyte.</p> <b>Fet text, men inget radbyte.</b> <i>Kursiv text, men inget radbyte.</i>

En rubrik, sedan radbyte

En paragraf, sedan radbyte.

Fet text, men inget radbyte. Kursiv text, men inget radbyte.

Det är detta som egenskapen display bestämmer. De taggar vars display-värde är block kommer att ha radbyte före och efter sig (så som <h1> och <p>), medan de taggar vars display-värde är inline inte kommer ha det (så som <b> och <i>).

Nedan kommer ett exempel med samma taggar som ovan, men där vi har bytt det display-värde som taggen har som standard.

HTML - HyperText Markup Language
<h1 style="display: inline;">En rubrik, display="inline".</h1> <p style="display: inline;">En paragraf, display="inline".</p> <b style="display: block;">Fet text, display="block".</b> <i style="display: block;">Kursiv text, display="block".</i>

En rubrik, display="inline".

En paragraf, display="inline".

Fet text, display="block". Kursiv text, display="block".

Egenskapen display kan anta väldigt många olika värden, men det är främst värdena block och inline som är viktiga att kunna. I denna lektionen ska du bara få lära dig ett till värde, och det är none. De element som har det värdet kommer inte att visas på sidan.

HTML - HyperText Markup Language
<p>Paragraf 1.</p> <p style="display: none;">Paragraf 2.</p> <p>Paragraf 3.</p>

Paragraf 1.

Paragraf 2.

Paragraf 3.

Nu kanske du undrar varför man vill ha med en tagg på sidan som inte visas? Det är för att man kan ändra hur den ska visas med hjälp av Javascript. Nedan kan du se ett verk som använder sig utav Javascript (men hur det fungerar får du inte lära dig nu).

Visa listan under

Gå till nästa lektion, Marginaler och padding.