height style property doesn t work in div elements

Question

I m setting a height of 20px on a  lt div gt   though when it renders in the browser  its only 14px high   Any ideas    lt div style  display inline  height 20px width  70px  gt My Text Here lt  div gt

User · Answer

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    lt div style  height 20px  width  70px   gt My Text Here lt  div gt

User · Answer

Position absolute fixes it for me  I suggest also adding a semi-colon if you haven t already     container       width  22 5       size  22 5  22 5       margin-top  0       border-radius  10px      background-color  floralwhite      display inline-block      min-height  20       position  absolute      height  50

User · Answer

use the min-height property  min-height 20px

User · Answer

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  mdash   You re also missing a   terminator for the height property    lt div style  display inline  height 20px width  70px  gt My Text Here lt  div gt   lt  --                                     here                       -- gt    Working example  http   jsfiddle net FpqtJ

User · Answer

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

User · Answer

You re loosing your height attribute because you re changing the block element to inline  it s now going to act like a  lt p gt    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

User · Answer

You try to set the height property of an inline element  which is not possible  You can try to make it a block element  or perhaps you meant to alter the line-height property

User · Answer

I m told that it s bad practice to overuse it  but you can always add  important after your code to prioritize the css properties value     p height 400px important

User · Answer

This worked for me   min-height  14px  height  14px

[css] height style property doesn't work in div elements

Examples related to css

Examples related to html