Max-Height

Set the maximum height of an element.

Syntax
      max-height: length | percentage | none | inherit ;

Length - The max height in px, pt or em.
percentage - The max height as a percentage value
none - No limit on the height. (default)
inherit - inherit from the parent element.

max-content - Experimental/CSS 3, the intrinsic preferred height.
min-content - Experimental/CSS 3, the intrinsic minimum height.
fit-content - Experimental/CSS 3, the intrinsic preferred height.
fill-available - Experimental /CSS 3, The containing block height minus horizontal margin, border and padding.
available - An ancient name for the keyword above (some browsers only)

Max-height does not include padding, borders, or margins.
If a div contains more text or larger text, than will fit within a limited height, then it will scroll below the bottom border.

Examples:
h1 { max-height: 25px; }
.emw3class { max-height: 2em; }

#emw3id { max-height: 25pt; }

Try it:

This is a sample of text with a CSS border.
The border helps to display the height of the element.

(CSS 2) Browser Support: All major browsers.

“Happiness makes up in height what it lacks in length” ~ Robert Frost

Related:

min-height -Minimum height of an element.
height - Height of an element.
width - Width of an element.
box-sizing - The CSS box model used to calculate the height and width of elements.


Copyright © 2013-2022 Emw3.com
Some rights reserved