Display egenskaper och dokumentflödet

Varför tar ett stycke hela raden?

Har du märkt att dina rubriker och stycken alltid hamnar på egna rader? Du har aldrig bett om det, ändå staplas <h1>, <p> och listorna på varandra, uppifrån och ned. Andra element gör tvärtom: en fetstilad fras (<strong>) eller en länk (<a>) stannar kvar mitt i meningen i stället för att bryta rad. Det verkar självklart, men det är ett medvetet beslut som webbläsaren fattar åt dig.

Varje HTML-element har ett standardvärde för CSS-egenskapen display. Det värdet avgör hur elementet tar plats på sidan, om det knuffar undan element runt sig, eller flödar med dem som ett ord i en mening.

Det här är grunden för i princip all CSS-layout. Förstår du det, förstår du varför din kod beter sig som den gör. Det är också förklaringen till varför att en del element helt struntar i vilken höjd och bredd du sätter på dem, medan andra respekterar det.

Block och inline, de två grundlägena

Tänk på block-element som pappersark lagda i en hög: varje nytt ark hamnar under det föregående och tar upp hela bredden, oavsett hur lite innehåll det har.

Tänk på inline-element som ord i en mening: de placerar sig efter varandra horisontellt och bryr sig inte om att starta en ny rad förrän utrymmet tar slut.

Typiska block-element: <h1>-<h6>, <p>, <div>, <ul>, <li>, <main>, <section>, <article>, <header>, <footer>, <nav>

Typiska inline-element: <a>, <strong>, <em>, <span>, <img>

<h2>Jag är ett block-element</h2>
<h2>Jag hamnar automatiskt på en ny rad</h2>

<p>
    I det här stycket sitter <strong>fetstil</strong> och <a href="#">en länk</a> kvar i textflödet.
</p>

Rubrikerna knuffar varandra nedåt. <strong> och <a> stannar i texten.

Varför spelar det roll i CSS?

Det vanligaste problemet: du lägger padding på en länk för att göra den klickbara ytan större. Men ingenting händer med höjden.

a {
    padding: 10px 20px;
}

Inline-element ignorerar vertikal padding i layouten. De låter den inte påverka radavståndet till texten runt dem. Öppna DevTools och inspektera länken i Computed-fliken, höjden har knappt ändrats trots paddingen.

Det är inte ett CSS-fel. Det är hur inline fungerar.

display: inline-block, kompromissen

inline-block är mellantinget: elementet flödar med texten som ett inline-element, men respekterar bredd, höjd och vertikal padding som ett block-element.

a {
    display: inline-block;
    padding: 10px 20px;
}

Det är anledningen till att knappar och navigationslänkar nästan alltid har display: inline-block eller display: block, du vill att hela den klickbara ytan ska vara stor nog att träffa med ett finger.

Längre fram, i navigationsstruktur, lägger vi display: block på våra nav-länkar. Nu förstår du varför det behövs.

display: flex, en förhandsvisning

Det finns fler display-värden. display: flex är ett av de viktigaste, det aktiverar Flexbox på ett element och låter dig styra hur dess direkta barn placerar sig i en rad eller kolumn.

Du behöver inte förstå Flexbox i detalj ännu. Det räcker att veta att display är nyckeln, det är det du ändrar när du vill att ett element ska bete sig annorlunda. I Navigationsstruktur ser du display: flex göra en vertikal lista horisontell på en enda rad.

Pröva i DevTools: Se display-värdet live

Öppna din sida och tryck F12.
Markera ett <h1>-element i Element-trädet.
Klicka på fliken Computed och scrolla ned till egenskapen display. Du ser värdet block.
Markera ett <a>-element och gör samma sak. Du ser inline.
Växla till fliken Styles och lägg till display: block på länken direkt i panelen. Ser du hur den nu tar upp hela raden?
Prova display: inline på ett <p>-element. Flödar styckena nu ihop med varandra?

Begrepp

Dokumentflöde (normal flow) Det standardsätt webbläsaren placerar element på sidan utan några layout-regler. Block-element staplas vertikalt uppifrån och ned. Inline-element flödar horisontellt med texten.
display: block Elementet tar upp hela tillgängliga bredden och tvingar nästa element att börja på en ny rad. Respekterar bredd, höjd och all padding. Standard för de flesta strukturella element som <p>, <h1> och <div>.
display: inline Elementet flödar med omgivande text och startar inte en ny rad. Bredd och höjd kan inte sättas, och vertikal padding påverkar inte radavståndet. Standard för <a>, <strong>, <span>.
display: inline-block Flödar med texten som inline, men respekterar bredd, höjd och vertikal padding som block. Standardlösningen för knappar och navigeringslänkar som ska ha tillräcklig klickyta.
display: flex Aktiverar Flexbox på elementet. Dess direkta barn blir flex-items som kan placeras i rad eller kolumn med full kontroll över fördelning och justering. Introduceras i Navigationsstruktur.

Uppgift: Synliggör flödet

Skapa en slask-fil för experimentet, till exempel display-test.html. Det är en fil du bara använder för att prova, du behöver inte spara den och den hör inte till din övningssida. Klistra in koden nedan och öppna den i webbläsaren.

<!DOCTYPE html>
<html lang="sv">
    <head>
        <meta charset="utf-8" />
        <title>Display-test</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <h2>Block-element</h2>
        <p>Det här stycket är ett block.</p>
        <p>Det här stycket är ett annat block.</p>

        <h2>Inline-element</h2>
        <p>Här finns en <a href="#">länk</a> och ett <span>span</span> i texten.</p>

        <h2>Inline-block</h2>
        <a class="knapp" href="#">Hem</a>
        <a class="knapp" href="#">Om</a>
        <a class="knapp" href="#">Kontakt</a>
    </body>
</html>

/* style.css */
p,
h2 {
    outline: 2px solid blue;
}
a,
span {
    outline: 2px solid red;
}

.knapp {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: #333;
    color: white;
    text-decoration: none;
}

Titta på hur de blåa boxarna sträcker sig över hela bredden, oavsett hur lite text de innehåller.
Titta på hur de röda elementen sitter kvar i texten utan att knuffa ut omgivande innehåll.
Ta bort display: inline-block från .knapp och ladda om. Vad händer med knapparna och deras padding?
Försök sätta height: 100px på span-elementet i CSS. Händer något?

Vad händer om…

Sätt display: block på <span>-elementet. Beter det sig nu som ett block-element trots att <span> är en semantisk inline-tagg? Vad säger det om förhållandet mellan HTML-element och CSS-beteende?

Motivera & reflektera

I din readme.md, skriv kort ett av dina svar på “Vad händer om…”-frågan ovan, och förklara med dina egna ord varför padding inte gav höjd på ett vanligt inline-element.