DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!
The height property in CSS defines specifies the content height of boxes and accepts any of the length values.
The “content” area is defined as the padding and border in addition to the height/width or size the content itself takes up.
Negative values like height: -100px are not accepted. The height property does not apply to non-replaced inline elements including table columns and column groups.
.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 */
}If the height of the containing block is not specified explicitly, and the element is not absolutely positioned, the value of its height computes to auto (it will be as tall as the content inside it is, or zero if there is no content). If the elements content portion requires more vertical space than available from the value assigned, the elements behavior is defined by the overflow property.
When using the keyword auto, height is calculated based on the elements content area unless explicitly specified. This means a value based on a percentage is still that of the elements content area. Similarly, if the height of the container is set to a percentage value, a child elements percentage height is still based on the content area of that child element.
Height can also be used as an animatable property.
Browser support
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| All | All | All | All | All | All |
| Android Chrome | Android Firefox | Android Browser | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| All | All | All | All | All |
‘The “content” area is defined as the padding, border and margin of an element’ Is this right?
I think the content area is defined by width and height properties of an element.
Yup, I am also confused by that statement. I think that wrong or needs to be phrased better.
That sentence in the article is obviously a mistake. No one has time to proof-read (or look at comments on years-old articles), and it already got our click-through…
See https://www.w3.org/TR/CSS21/box.html#box-dimensions
And a better referencefor “content height” than the url the article links to would be https://www.w3.org/TR/CSS21/visudet.html#the-height-property
The existence of ‘box-sizing: border-box’ means we can’t unqualifiedly say “content area is defined by (or as) width and height properties…” And anyway “defined as” is not the same as “defined by”. But for the default (equiv to box-sizing: content-box) that’s about good enough. Especially since “content area” doesn’t seem to be defined precisely in the spec., so best to stick with things that are, like height, width, and padding. I don’t know what the author exactly meant to write, but a conceptual definition of “content area” could be “the area inside the padding”.
:q!
depends on your box-sizing settings in css.
And how is the height calculated if the height of the containing block is specified and the containing block is absolutely positioned?
Sometimes, the height of an element is no where near the height of the content inside it.
A div containing two floating divs, each of height 100px, the height of the div container is 0. A good explanation with a demo is available at this link: https://devserver-002.info/floating_div_scam//floatdemo/
But then you don’t go on an say what happens if the height of the containing box IS defined. What happens then to the height of the element when it is set to 100%?