override computed css value

Question

I am trying to customize the height of my ahref element in my website. I have set a class value, and the class value in my CSS file looks like this :

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

I want my height to be set at 70px, but it always shows as 16px. I am thinking that the font size is having an effect on the size. If i look at my style tab in chrome, I see no mention of these 16px hoever plenty of mentions of the 70px.

enter image description here

However if I look at the computed tab in Chrome, i see that the height of my ahref is auto, and if I hover of the blue box, i see that it is 16px.

enter image description here

How do I override this value?

Not related to the question really, but - awesome MSPaint-Fu! :) — UweB, Jul 24 '14 at 08:43
Have you tried changing the `a` to `display: inline-block;` ? — Andy Holmes, Jul 24 '14 at 08:48

score 3 · Answer 1 · answered Jul 24 '14 at 08:48

3

To the best of my knowledge to set the height on the inline element you'll need to add display: inline-block; See below:

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

answered Jul 24 '14 at 08:48

joegandy

320
1
5

score 3 · Accepted Answer · edited May 23 '17 at 12:27

I am trying to customize the height of my a href element in my website

So <a> elements are inline by default, just like span or say img and hence your height property won't work on inline elements, even if you apply margins, they will only work horizontally and not vertically, so inorder to make it work, use inline-block or block^[1]

(^[1] If you want the element to take all available horizontal space)

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

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

For more information you can read my other answer on span element which is also an inline element by default.

From W3C :

Applies to : all elements but non-replaced inline elements, table columns, and column groups

score 1 · Answer 3 · answered Jul 24 '14 at 08:47

If I understand you correctly, the link's css show 70px height, but only heights 16px.

Anchors are by default inline elements, and inline elements only use the height of the elements they contain. In this case the text. If you want to set their height you have to change the type of display to block or inline-block. Then you will be able to set heights, paddings, etc... that otherwise won't affect the element.

override computed css value

3 Answers3