height style property doesn't work in div elements

css height
css height not working
css height fit content
fixed height css
inline css height
how to auto adjust the div height according to content in it
css height vh
css position

I'm setting a height of 20px on a <div>, though when it renders in the browser, its only 14px high.

Any ideas?

<div style="display:inline; height:20px width: 70px">My Text Here</div>

You cannot set height and width for elements with display:inline;. Use display:inline-block; instead.

From the CSS2 spec:

10.6.1 Inline, non-replaced elements

The height property does not apply. The height of the content area should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font. (The latter would ensure that glyphs with parts above or below the em-box still fall within the content area, but leads to differently sized boxes for different fonts; the former would ensure authors can control background styling relative to the 'line-height', but leads to glyphs painting outside their content area.)

EDIT — You're also missing a ; terminator for the height property:

<div style="display:inline; height:20px width: 70px">My Text Here</div>
<!--                                  ^^ here                       -->

Working example: http://jsfiddle.net/FpqtJ/

CSS height property, The height property sets or returns the height of an element. The height property has effect only on block-level elements or on elements with absolute or fixed position. The overflowing content can be manipulated with the overflow property. The height property does not apply. The height of the content area should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font.

This worked for me:

min-height: 14px;
height: 14px;

HTML DOM Style height Property, You cannot set height and width for elements with display:inline; . Use display: inline-block; instead. From the CSS2 spec: 10.6.1 Inline� The height property sets or returns the height of an element. The height property has effect only on block-level elements or on elements with absolute or fixed position. The overflowing content can be manipulated with the overflow property. Tip: Use the width property to set or return the width of an element.

Also, make sure you add ";" to each style. Your excluding them from width and height and while it might not be causing your specific problem, it's important to close it.

<div style="height:20px; width: 70px;">My Text Here</div>

height style property doesn't work in div elements, The height property does not apply to non-replaced inline elements including table columns and column groups. .wrap { height: auto; /* auto� Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

You're loosing your height attribute because you're changing the block element to inline (it's now going to act like a <p>). You're probably picking up that 14px height because of the text height inside your in-line div.

Inline-block may work for your needs, but you may have to implement a work around or two for cross-browser support.

IE supports inline-block, but only for elements that are natively inline.

Height Property, This define height in percentage compare with the parent element. initial, sets its default value. inherit, inherit the property from prents. Return� With max-height you should know the element computed height because if the content have a variable length 1500px may can’t be enough. If you set a custom property to replace the max-height value, with js you can get the actual element height and change the max-height custom property runtime.

Set positioning to absolute. That will solve the problem immediately, but might cause some problems in layout later. You can always figure out a way around them ;)

Example:

position:absolute;

HTML, The CSS height property sets the height of the element. This property does not include padding, borders, or margins. <html> <head> <title>The title of the document</title> <style> div { height: 60px; background-color: #1c87c9; color: # eee; }� The width property specifies the width of an element, and the height property specifies the height of an element. The width and height of the image can be specified by applying these properties to the IMG element.

CSS height Property, This CSS tutorial explains how to use the CSS property called height with syntax and examples. The CSS height property defines the height of the content area� The min-height CSS property sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified for min-height.

CSS: height property, Get the value of a computed style property for the first element in the set of the property name as-is, camelCasing it won't work as it does for regular CSS properties. Get the width, height, text color, and background color of a clicked div. 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.

.css(), The data size of the image doesn't change even if the size is changed by these properties. Example. Example Sample image (width:200px, height:133px). <html >�

Comments
  • @Jonathan: you're also missing a semi-colon after the height property.
  • Closing the last css rule with a ; is not required, makes no functional difference and adds unnecessary markup
  • This is not a good solution to OP's issue, since his problem has almost nothing to do with the position property. This will cause unnecessary layout problems, not ones that should be solved later.