Højde - CSS-tricks

Anonim

Den heightejendom i CSS definerer angiver indholdet højde af kasser og accepterer nogen af længde værdier.

Området “indhold” er defineret som polstring og kant ud over den højde / bredde eller størrelse, som selve indholdet tager.

Negative værdier som height: -100pxaccepteres ikke. Den heightegenskab gælder ikke for ikke-udskiftet inline elementer, herunder tabelkolonner og kolonnegrupper.

.wrap ( height: auto; /* auto keyword */ height: 120px; /* length values */ height: 10em; height: 0; /* unit-less length is OK for zero */ height: 75%; /* percentage value */ height: inherit; /* inherited value from parent element */ )
Tjek denne pen!

Hvis højden på den indeholdende blok ikke er angivet eksplicit, og elementet ikke er absolut placeret, beregnes værdien af ​​dens højde til auto (den vil være så høj som indholdet inde i den eller nul, hvis der ikke er noget indhold). Hvis elementets indholdsdel kræver mere lodret plads end tilgængelig fra den tildelte værdi, defineres elementernes adfærd af overflowegenskaben.

Når du bruger søgeordet auto, heightberegnes på grundlag af elementerne indholdsområdet medmindre det udtrykkeligt er angivet. Dette betyder, at en værdi baseret på en procentdel stadig er den for elementernes indholdsområde. Tilsvarende, hvis containerens højde er indstillet til en procentværdi, er en procentelement for underordnede elementer stadig baseret på indholdsområdet for det underordnede element.

Højde kan også bruges som en animerbar egenskab.

Browsersupport

IE Edge Firefox Chrome Safari Opera
Alle Alle Alle Alle Alle Alle
Android Chrome Android Firefox Android-browser iOS Safari Opera Mobile
Alle Alle Alle Alle Alle
Kilde: caniuse

Relaterede egenskaber

Almanak den 15. januar 2021

maks. højde

.element ( max-height: 3rem; ) Sara Cope