line-height property: normal + 4px

Question

I want the normal line-height, plus 4px. I have tried

line-height: normal + 4px;

but that doesn't work.

(Note: I don't want approximations using percentages.)

Answer 1

Why not just take aways Chromes little focus glare?

use the css property outline: none;

http://jsfiddle.net/XF6fS/

Answer 2

You can't do any arithmetic in CSS. Libraries like LESSCSS allow you to do certain things, but you can't get properties of rendered elements.

You could use percentages to get an approximation, however you should probably set an explicit line-height for the elements; this will be the same accross browsers.

Running this JSFiddle shows the following results:

• FireFox 6: 20px
• IE 8: normal
• Chrome 13: normal

Set an explicit height; it's going to be much better compatible with all browsers.

Answer 3

There is no direct way to do it. As said, you cannot do any calculations in CSS files. That's why we keep saying that CSS is not complete, we have to make floats to display our pages properly, which is nonsense when you think about it.

As you have created the css, you can add 4pt yourself. If you don't want to hard-code, you can use CSS frameworks or other languages that create CSS output. Frameworks are fine, but I do not recommend using other languages that create CSS output for you. This is fun, but you will not learn the language and since CSS is a hard-to-understand language, you will stuck if you have any errors, misplacements on your page.

So, about your question, you can use javascript to getComputedStyle and add 4pt and set the style of the element.

This is the javascript that gets the style:

function getStyle(el,styleProp)
{
    var x = document.getElementById(el);
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}

Usage:

var height = parseInt(getStyle("elementId", "line-height"));
var earlycss = document.getElementById("elementId").style.cssText
document.getElementById("elementId").style.cssText = earlycss + "\nline-height: " + (height + 4) + "px;";