Property line-height: normal + 4px

Question

I want normal line-height plus 4px. I tried

line-height: normal + 4px;

but it does not work.

(Note: I do not want the approximation to use percentages.)

Answer 1

Why not just look at the chords with a little focus?

use css outline: none; property outline: none;

http://jsfiddle.net/XF6fS/

Answer 2

You cannot do arithmetic in CSS. Libraries such as LESSCSS allow you to perform certain actions, but you cannot get the properties of the displayed items.

You can use percentages to get closer, however, probably you should set an explicit line-height for the elements; these will be the same browsers.

Running this JSFiddle shows the following results:

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

Set explicit height; It will be much better compatible with all browsers.

Answer 3

There is no direct way to do this. As said, you cannot do any calculations in CSS files. Therefore, we continue to say that CSS not complete, we must make a float to display our pages correctly, which is pointless when you think about it.

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

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

This is 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; } 

Using:

 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;"; 

Answer 4

try -

 line-height: -moz-calc(normal + 4px); 

But this would not be an ideal solution due to cross-browser issues, and older browsers would not ideally support this. :). And for further references - http://www.w3.org/TR/css3-values/#functional-notation

Answer 5

im sure you cant do the math with css try using some javascript to get the line height and then add 4

Answer 6

You can try to use the row height as a percentage. For example: Line-height: 110% if you want to do this exclusively in CSS

Answer 7

You can try using em to determine the height of your string, and then, assuming you know the font size, you can make sure that it + 'x'%

The problem, of course, is that in 90% of cases you cannot know the font size (or rather, someone will not play with it).