CSS egenskaben display findes på alle HTML elementer. Et <div>-element har som standard display: block; hvor et <span>-element har display: inline; og et <style>-element har display: none;. Og der findes en god mængde andre værdier, som man kan ændre egenskaben til, for at opnå bestemte opførelser.
I dette opslag vil jeg gennemgå nogle af de mest hyppe display-værdier, hvordan de opfører sig og hvad man kan bruge dem til.
display: none;
Måske den nemmeste at forklare og forstår. At sætte display: none; gør, at elementet ikke bliver vist. Overhovedet. Elementet vil være helt væk på hjemmesiden, men findes stadig i HTML'et. At bruge display: none; kunne for eksempel se sådan her ud:
.hide-me {
display: none;
}
Alle elementer, der får denne .hide-me klasse på sig, vil nu være pist væk! Man kan måske spørge sig selv, hvorfor man vil skjule et element fuldkommen. Hvorfor bruge tid på at lave et element, hvis man alligevel bare skjuler det?
Som jeg kort beskrev i den indledende tekst, har elementer som <style> (og også flere andre) som standard denne værdi. Det er fordi deres indhold er vigtigt for hjemmesiden, men er ikke noget, der skal vises på siden - personen som kigger på hjemmesiden, har ikke brug for at se alle CSS-reglerne. Men man kan sagtens give et <style> tag en anden display-værdi, så den bliver synlig.
Et andet tidspunkt display: none; kan blive aktuelt, er hvis man gerne vil skjule et element på nogen skærmstørrelser, men vise det på andre. Det kunne for eksempel se sådan her ud:
@media only screen and (max-width: 1000px) {
.hide-me-sometimes {
display: none;
}
}
Her vil klassen skjule et element, så længe vinduet har en bredde på mindre en 1000 pixels.
Derudover kan display: none; sættes på et element dynamisk ved hjælp af JavaScript, så man for eksempel kan skjule og fremvise en menu ved et tryk på en knap - så der kan være en masse gode grunde til at bruge værdien!
display: block; og display: inline;
De to måske mest gængse værdier for display-egenskaben er block og inline.
Et standard <div>-element, et <header>- eller <footer>-element og rigtig mange andre vil som standard være defineret med display: block;, hvilket betyder, at der vil være et linjebrud før og efter elementet. Med andre ord, vil block-elementer normalvis stables ovenpå hinanden. Et element med display: block; vil også som standard fylde den fulde bredde, svarende til at sætte width: 100%;.
Et <span>- eller <a>-element, for eksempel, vil derimod som standard være defineret med display: inline;. Det betyder, at så længe der er plads til det, vil disse placere sig ved siden af hinanden, og først gå til næste linje når der ikke er plads til mere på én linje.
Når et element er sat til display: inline;, kan man ikke sætte elementets højde eller bredde - det er fuldkommen styret af elementets indhold. Samtidig kan man heller ikke sætte margin eller padding på elementernes top eller bund, men du kan godt sætte det i elementernes højre og venstre side. Det vil sige, at følgende ikke burde gøre en dyt:
span {
width: 1000px;
height: 1000px;
margin-top: 100px;
margin-bottom: 100px;
padding-top: 300px;
padding-bottom: 300px;
}
Men der er faktisk en måde, hvorpå man kan kombinere display: block; og display: flex;...
display: inline-block;
Hvis man sætter et element til at bruge display: inline-block; vil man få en god blanding af opførslerne for block og inline, nemlig elementer, som placerer sig side om side som ved display: inline;, men med mulighed for at sætte bredde, højde, padding og margin.
display: flex; og display: inline-flex;
...
...
display: grid; og display: inline-grid;
...