CSS

Begreppen inline och block level

Vi kommer ofta stöta på begreppen inline och block level, blocknivå, när vi talar om olika HTML-element (taggar).

Alla HTML-element som kan visas på en webbsida har någon av dessa grundläggande egenskaper, med vissa variationer.

Om vi börjar med block level-, eller blocknivå-element så är detta taggar som ger ett nytt stycke.

Ett blocknivåelement kan användas till att göra en egen ruta eller block, med hjälp av CSS. <div> är block level, liksom <p>, eller <h1>.

Ett inlineelement, däremot bryter inte stycket (eller ens raden), och kommer alltså bete sig annorlunda när man använder det med CSS.

Man kan med CSS dessutom ändra på blocknivåelement, så att de visas som inline eller tvärt om, göra om ett inline-element till block. Detta utnyttjas till exempel när man vill byga en liggande meny av en lista.

Listpunkter (<li>) visas normalt som egna block, men genom att skriva CSS som säger att display: inline; kommer de att visas utan radbrytningar, efter varandra på samma rad tills raden tar slut.