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

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>

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;}

use the min-height property. min-height:20px;

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>

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.

This worked for me:

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

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?

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;

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%;
}