Html 高度样式属性在 div 元素中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4967613/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
height style property doesn't work in div elements
提问by Priest of Psi
I'm setting a height of 20px on a <div>, though when it renders in the browser, its only 14px high.
我在 a 上设置了 20px 的高度<div>，但是当它在浏览器中呈现时，它只有 14px 高。
Any ideas?
有任何想法吗？
<div style="display:inline; height:20px width: 70px">My Text Here</div>
回答by Andy E
You cannot set heightand widthfor elements with display:inline;. Use display:inline-block;instead.
您不能设置height和width带有 的元素display:inline;。使用display:inline-block;来代替。
From the CSS2 spec:
来自CSS2 规范：
10.6.1 Inline, non-replaced elements
The
heightproperty 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.)
10.6.1 内联、非替换元素
该
height物业不适用。内容区域的高度应该以字体为基础，但是这个规范并没有具体说明如何。例如，UA 可以使用 em-box 或字体的最大上升部和下降部。（后者将确保带有 em-box 上方或下方部分的字形仍然在内容区域内，但会导致不同字体的大小不同的框；前者将确保作者可以控制相对于“行高”的背景样式，但会导致字形绘制在其内容区域之外。）
EDIT — You're also missing a ;terminator for the heightproperty:
编辑 — 您还缺少;该height属性的终止符：
<div style="display:inline; height:20px width: 70px">My Text Here</div>
<!-- ^^ here -->
Working example: http://jsfiddle.net/FpqtJ/
工作示例：http: //jsfiddle.net/FpqtJ/
回答by Sol
This worked for me:
这对我有用：
min-height: 14px;
height: 14px;
回答by Dawson
You're loosing your height attribute because you're changing the blockelement 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.
您正在失去 height 属性，因为您将块元素更改为内联（它现在将像 a 一样<p>）。由于内嵌 div 中的文本高度，您可能会选择 14px 的高度。
Inline-block may work for your needs, but you may have to implement a work around or two for cross-browser support.
Inline-block 可能会满足您的需求，但您可能必须实现一两个变通方法以实现跨浏览器支持。
IE supports inline-block, but only for elements that are natively inline.
IE 支持 inline-block，但仅适用于本机 inline 的元素。
回答by Purnesh Tripathi
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;
回答by We're All Scholars
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>
回答by Daan
You try to set the heightproperty of an inlineelement, which is not possible. You can try to make it a blockelement, or perhaps you meant to alter the line-heightproperty?
您尝试设置元素的height属性inline，这是不可能的。您可以尝试使其成为一个block元素，或者您可能打算更改该line-height属性？
回答by L0fty
I'm told that it's bad practice to overuse it, but you can always add !importantafter your code to prioritize the css properties value.
有人告诉我，过度使用它是不好的做法，但您始终可以!important在代码之后添加以优先考虑 css 属性值。
.p{height:400px!important;}
回答by ArchiPlays
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%;
}
回答by Hussein
use the min-height property. min-height:20px;
使用 min-height 属性。最小高度：20px；
