覆盖计算的css值[重复]答案

【问题标题】：override computed css value [duplicate]覆盖计算的css值[重复]
【发布时间】：2014-09-15 17:28:39
【问题描述】：

我正在尝试在我的网站中自定义 ahref 元素的高度。我设置了一个类值，我的 CSS 文件中的类值如下所示：

.CockpitArrowLink {
    height: 70px !important;
    font-size : 13px;
    min-height:70px !important;
}

我希望我的高度设置为 70 像素，但它始终显示为 16 像素。我认为字体大小对大小有影响。如果我在 chrome 中查看我的样式选项卡，我看不到这些 16 像素的提及，但很多提及 70 像素。

但是，如果我查看 Chrome 中的计算选项卡，我会看到我的 ahref 的高度是自动的，如果我将鼠标悬停在蓝色框上，我会看到它是 16px。

如何覆盖这个值？

【问题讨论】：

16px 可能是您在body { }中的默认字体大小
与问题无关，但是 - 很棒的 MSPaint-Fu！ :)
@UweB 它的截图工具，它不让你写文字:)
@AndyHolmes 不，不是问题
你试过把a改成display: inline-block;吗？

标签： html css google-chrome

【解决方案1】：

我正在尝试自定义我的 a href 元素 的高度网站

所以<a> 元素默认是内联，就像span 或说img 一样，因此你的height 属性在内联上不起作用元素，即使您应用边距，它们也只会水平工作而不是垂直工作，因此为了使其工作，请使用 inline-block 或 block^[1]

(^[1]如果你想让元素占据所有可用的水平空间)

.CockpitArrowLink {
    height: 70px;
    font-size : 13px;
    display: inline-block; /* Add this */

    /* Use vertical-align if required */
    vertical-align: middle; /* or top as a value */
}

有关更多信息，您可以在span 元素上read my other answer，默认情况下它也是inline 元素。

来自W3C：

适用于：所有元素，但未替换的内联元素、表格列和列组

【讨论】：

【解决方案2】：

据我所知，要设置内联元素的高度，您需要添加 display: inline-block;见下文：

.CockpitArrowLink { 
    height: 70px;
    font-size : 13px;
    display:inline-block;
}

【讨论】：

【解决方案3】：

如果我理解正确，链接的 css 显示高度为 70 像素，但高度仅为 16 像素。

锚点默认是内联元素，内联元素只使用它们包含的元素的高度。在这种情况下，文本。如果您想设置它们的高度，您必须将显示类型更改为块或内联块。然后您将能够设置高度、填充等...否则不会影响元素。

【讨论】：