Wysokość - CSS-Tricks

Anonim

heightNieruchomość w CSS definiuje Określa wysokość zawartość pudełek i akceptuje żadnej z wartości długości.

Obszar „treści” jest definiowany jako dopełnienie i obramowanie, a także wysokość / szerokość lub rozmiar, jaki zajmuje sama treść.

Wartości ujemne, takie jak, height: -100pxnie są akceptowane. heightWłaściwość nie ma zastosowania do elementów spoza zastąpione inline tym kolumn tabeli oraz grup kolumn.

.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 */ )
Sprawdź ten długopis!

Jeśli wysokość bloku zawierającego nie jest określona jawnie, a element nie jest pozycjonowany absolutnie, wartość jego wysokości jest obliczana jako auto (będzie równa wysokości zawartej w nim zawartości lub zero, jeśli nie ma zawartości). Jeśli część zawartości elementów wymaga więcej miejsca w pionie niż jest to dostępne w przypisanej wartości, zachowanie elementów jest definiowane przez overflowwłaściwość.

W przypadku użycia słowa kluczowego auto, heightjest obliczany na podstawie obszaru zawartości elementów, chyba że wyraźnie określono. Oznacza to, że wartość procentowa jest nadal wartością obszaru zawartości elementów. Podobnie, jeśli wysokość kontenera jest ustawiona na wartość procentową, procentowa wysokość elementów podrzędnych jest nadal oparta na obszarze zawartości tego elementu podrzędnego.

Wysokość może być również używana jako animowana właściwość.

Wsparcie przeglądarki

TO ZNACZY Brzeg Firefox Chrom Safari Opera
Wszystko Wszystko Wszystko Wszystko Wszystko Wszystko
Android Chrome Android Firefox Przeglądarka Android iOS Safari Opera Mobile
Wszystko Wszystko Wszystko Wszystko Wszystko
Źródło: caniuse

Powiązane właściwości

Almanach 15 stycznia 2021 r

maksymalna wysokość

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