覆盖计算的css值

Question

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

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

我希望我的高度设置为70px，但它总是显示为16px。我认为字体大小对大小有影响。如果我在chrome中查看我的样式选项卡，我看到没有提到这些16px，而是大量提及70px。

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

如何覆盖此值？

Answer 1

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

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

Answer 2

  

我正在尝试自定义 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：

  

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

Answer 3

如果我理解正确，链接的css显示70px高度，但只有高度16px。

默认情况下，锚点是内联元素，内联元素仅使用它们包含的元素的高度。在这种情况下的文字。如果要设置高度，则必须更改要阻止或内联阻止的显示类型。然后你就可以设置高度，填充等......否则不会影响元素。