Question

我在<div>上设置了20px的高度，但是当它在浏览器中呈现时，它只有14px高。

有什么想法吗？

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

Answer 1

您无法为height的元素设置width和display:inline;。请改用display:inline-block;。

来自the CSS2 spec：

10.6.1内联，未替换元素

height属性不适用。内容区域的高度应基于字体，但此规范未指定方式。 UA可以例如使用em-box或字体的最大上升和下降。（后者将确保包含在em-box上方或下方的部分的字形仍然落在内容区域内，但导致不同字体的不同字体的盒子;前者将确保作者可以控制相对于“行高”的背景样式，但导致在其内容区域之外绘制字形。）

编辑 - 您还缺少;属性的height终结符：

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

工作示例：http://jsfiddle.net/FpqtJ/

Answer 2

这对我有用：

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

Answer 3

另外，请确保为每种样式添加“; ”。您将它们从宽度和高度中排除，虽然它可能不会导致您的具体问题，但关闭它是很重要的。

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

Answer 4

您丢失了高度属性，因为您正在将阻止元素更改为内嵌（现在它将像<p>一样）。由于你的内嵌div里面的文字高度，你可能会拿到14px的高度。

内联块可能会满足您的需求，但您可能需要实施一两个工作才能实现跨浏览器支持。

IE支持内联块，但仅适用于本机内联的元素。

Answer 5

将定位设置为绝对值。这将立即解决问题，但可能会在以后的布局中引起一些问题。你总能找到解决方法;）

示例：

position:absolute;

Answer 6

您尝试设置height元素的inline属性，这是不可能的。您可以尝试将其设为block元素，或者您是想改变line-height属性？

Answer 7

有人告诉我，过度使用它是一种不好的做法，但是您始终可以在代码后添加!important来确定css属性值的优先级。

.p{height:400px!important;}

Answer 8

位置绝对值可以为我解决。我建议还添加一个分号（如果您还没有的话）。

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

Answer 9

使用min-height属性。最小高度：20像素;

高度样式属性在div元素中不起作用

9 个答案: