Display

display-egenskapen bestemmer hvordan et element oppfører seg i layouten. Det er en av de viktigste egenskapene i CSS.

Block

Block-elementer tar full bredde og starter på ny linje.

div {
    display: block;
}

┌─────────────────────────────────┐
│           Block 1               │
└─────────────────────────────────┘
┌─────────────────────────────────┐
│           Block 2               │
└─────────────────────────────────┘
┌─────────────────────────────────┐
│           Block 3               │
└─────────────────────────────────┘

Kjennetegn

• Tar full tilgjengelig bredde
• Starter alltid på ny linje
• Kan ha width, height, margin og padding

Eksempler på block-elementer

Disse er block som standard:

• <div>
• <p>
• <h1> - <h6>
• <ul>, <ol>, <li>
• <header>, <footer>, <main>, <section>
• <form>

Inline

Inline-elementer flyter i teksten og tar bare den plassen de trenger.

span {
    display: inline;
}

Her er en tekst med [inline] og [inline] elementer i seg.

Kjennetegn

• Tar bare nødvendig bredde
• Starter ikke på ny linje
• width og height ignoreres
• Vertikal margin og padding har ingen effekt

Eksempler på inline-elementer

Disse er inline som standard:

• <span>
• <a>
• <strong>, <em>
• <img> (teknisk inline, men oppfører seg litt annerledes)
• <code>

Inline-block

Kombinerer det beste fra begge verdener.

.box {
    display: inline-block;
}

┌───────┐ ┌───────┐ ┌───────┐
│ Box 1 │ │ Box 2 │ │ Box 3 │
└───────┘ └───────┘ └───────┘

Kjennetegn

• Flyter i teksten (som inline)
• Kan ha width, height, margin og padding (som block)
• Starter ikke på ny linje

Vanlig bruk

.button {
    display: inline-block;
    padding: 10px 20px;
    background: blue;
    color: white;
}

<a href="#" class="button">Knapp 1</a>
<a href="#" class="button">Knapp 2</a>

None

Skjuler elementet helt. Det tar ingen plass i layouten.

.hidden {
    display: none;
}

┌───────────┐
│  Synlig   │
└───────────┘
              ← .hidden (usynlig, tar ingen plass)
┌───────────┐
│  Synlig   │
└───────────┘

Forskjell fra visibility: hidden

/* display: none - fjerner fra layout */
.gone {
    display: none;
}

/* visibility: hidden - usynlig men tar plass */
.invisible {
    visibility: hidden;
}

display: none          visibility: hidden
┌───────┐              ┌───────┐
│   1   │              │   1   │
└───────┘              └───────┘
┌───────┐              ┌       ┐  ← tom plass
│   3   │              └       ┘
└───────┘              ┌───────┐
                       │   3   │
                       └───────┘

Flex

Aktiverer Flexbox-layout. Se Flexbox for detaljer.

.container {
    display: flex;
}

┌─────────────────────────────────┐
│ ┌───────┐ ┌───────┐ ┌───────┐  │
│ │   1   │ │   2   │ │   3   │  │
│ └───────┘ └───────┘ └───────┘  │
└─────────────────────────────────┘

Grid

Aktiverer Grid-layout for to-dimensjonale layouts.

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

┌─────────────────────────────────┐
│ ┌───────┐ ┌───────┐ ┌───────┐  │
│ │   1   │ │   2   │ │   3   │  │
│ └───────┘ └───────┘ └───────┘  │
│ ┌───────┐ ┌───────┐ ┌───────┐  │
│ │   4   │ │   5   │ │   6   │  │
│ └───────┘ └───────┘ └───────┘  │
└─────────────────────────────────┘

Sammenligning

Endre standard oppførsel

Du kan endre et elements standard display-verdi:

/* Gjør lenker til block */
a {
    display: block;
    padding: 10px;
    background: #f0f0f0;
}

/* Gjør list items til inline */
li {
    display: inline;
}

/* Gjør span til block */
span {
    display: block;
}

Praktiske eksempler

Horisontal meny

nav ul {
    list-style: none;
    padding: 0;
}

nav li {
    display: inline-block;
}

nav a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
}

Vis/skjul med JavaScript

Med DOM-manipulering og Events kan du vise/skjule elementer dynamisk:

.modal {
    display: none;
}

.modal.active {
    display: block;
}

// Vis modal
modal.classList.add('active');

// Skjul modal
modal.classList.remove('active');

Sentrert knapperad

.button-group {
    text-align: center;
}

.button {
    display: inline-block;
    padding: 10px 20px;
    margin: 5px;
    background: #007bff;
    color: white;
    border-radius: 4px;
}

Responsiv navigasjon

/* Mobil: vertikal meny */
nav li {
    display: block;
}

/* Desktop: horisontal meny */
@media (min-width: 768px) {
    nav li {
        display: inline-block;
    }
}

Oppsummering