I like to know if this is usual to use double measure unit lik PX and EM like: 1em/13px
What should be set in the correct way?
Paul_o_b
10:29 am on Nov 9, 2011 (gmt 0)
When font sizes are expressed that way they refer to the font-size first and then after the slash the line-height.
font-size/line-height
In your example above the font-size is 1em and then the line-height as been set to 13px. Which is nonsense really because if the computed font size was 16px the line height would be 13px and half your font would be missing.
Usually you would set something like 1em/1.2em to allow breathing space around the font. However I prefer unit-less line heights and would use 1em/1.2. (A unit-less line-height passes a scaling factor down to nested children unlike those with units which pass down a fixed computed size to their children).
Note that when using the "font" shorthand it is mandatory that you define font-size and font-family or the rule is invalid.
For font rules I prefer to use longhand anyway just to avoid any issues because any rules that you don't set in the shorthand are reverted to their defaults.
lucy24
10:57 pm on Nov 9, 2011 (gmt 0)
if the computed font size was 16px the line height would be 13px and half your font would be missing.
Or, depending on browser, the line-height value would simply be ignored.
Paul_o_b
10:02 am on Nov 10, 2011 (gmt 0)
I don't think it will be be ignored as such but will be allowed to overflow - which may or may not have much impact on surrounding content unless the font-size is quite large.
If the overflow is hidden then indeed all browsers will clip the content.
p { margin:0; overflow:hidden; font-size:24px; line-height:13px; }
With smaller font size the clipping will be less of course as there is always a little space around the glyph.
Although the line-height may be smaller than the font the "content area" (the box described by the font-size of each character in the element) can still increase the distance between successive baselines.
The inline-box model is though a thing of great complexity and mystery and no doubt there will be exceptions and exclusions to these rules :)