CSS: “height”: X negative values are not allowed.

Negative values for the CSS height property are invalid and will be rejected by browsers.

The CSS height property accepts only non-negative values. Valid values include auto, lengths like 100px or 10em, percentages like 50%, and viewport units like 100vh. A negative value such as height: -50px has no defined meaning for box dimensions and violates the CSS specification.

This error typically appears when height is set inline via the style attribute, and the W3C validator flags it during HTML validation. Common causes include typos, incorrect calculations in server-side templates, or JavaScript that generates a negative value and writes it into the markup.

If the intent is to hide or collapse an element, use height: 0 combined with overflow: hidden instead. If the intent is to shrink an element relative to some reference, use calc() with a positive result, such as height: calc(100% - 50px).

HTML examples

Invalid: negative height value

<div style="height: -100px;">
  Content here
</div>

Valid: using zero height or calc()

<!-- Collapse an element -->
<div style="height: 0; overflow: hidden;">
  Hidden content
</div>

<!-- Subtract from a reference value -->
<div style="height: calc(100vh - 100px);">
  Content here
</div>

Learn more:

MDN Reference

CSS height property

→

MDN Reference

CSS values and units

→