height

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, border, and margin of the element. 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 */
}
Check out this Pen!

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.

Related Properties

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS Opera Mobile IE Phone
Any Any Any Any 7+ Any Any 6.0+ 6.0+

IE7 doesn't support "inherit" as a value.

Comments

  1. User Avatar
    Mikeouwen

    ‘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.

    • User Avatar
      Appu
      Permalink to comment#

      Yup, I am also confused by that statement. I think that wrong or needs to be phrased better.

  2. User Avatar
    mike
    Permalink to comment#

    depends on your box-sizing settings in css.

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag