What do these two lines mean??
font: [B]100%/1.3[/B] arial, helvetica, sans-serif;
font: bold [B]14px/16px[/B] arial, helvetica, sans-serif;
Thanks,
Debbie
font: bold 14px/16px arial, helvetica, sans-serif;
means:
font-size: 14px;
line-height: 16px;
note: some mail clients do NOT support this.
So
font: 100%/1.3
means…
font-size: 100% (of base font wherever that must be set?!)
line-height: 1.3 times the font-size
Is that correct???
Also, what exactly is the difference between line-height and using padding??
Debbie
And in the first example, it’s a font size of 100% and a line height of 1.3em
font-size: 100% (of base font wherever that must be set?!)
actually, it means 100% of the parent element’s font size… so be careful if you have nested styles.
example:
body { font-size:32px} /ridiculously large for ease of math later on/
body > div { font: 100%/1.3 arial, helvetica, sans-serif;}
.first { font: 75%/1.3 arial, helvetica, sans-serif;}
.second{ font: 50%/1.3 arial, helvetica, sans-serif;}
.second p{ font: 50%/1.3 arial, helvetica, sans-serif;}
<body>
this text is 32 px, as you expect.
<div> this text is STILL 32 px, as you expect.
<div class=“first”> this text is 24px, as you still expect.
<div class=“second”>this text… is 12px… wait you didnt expect that did you
<p> this text is 6px, were you expectin that?!?</p>
</div></div><div>
<div class=“second”>another class=‘second’ but this time the text is 16px</div>
</body>
So math has to be applied.
line-height and padding don’t alter each other. think of line height as the rules on notebook paper. the space between the lines of text will vary in relation to the size of your line height. … 1.0 = “college ruled”, 2.0 =“regular” 3.0=“pre-school”…
the size of the line hight is PROPORTION to the size of the text. so line-height:2 is a space TWICE of what is set in font-size. another thing this allows you to do is set WHERE in the line the text sits. Using the notebook analogy again . if you have pre-school line-height (3.0) for example… you could write directly on the line, just bellow the top of the previous line or center it. for this you use: vertical-align: [top, middle, bottom, baseline…and so forth]
hope this rant has been enlightening for you. 
Why did the results come out as you describe above?
So math has to be applied.
line-height and padding don’t alter each other. think of line height as the rules on notebook paper. the space between the lines of text will vary in relation to the size of your line height. … 1.0 = “college ruled”, 2.0 =“regular” 3.0=“pre-school”…
the size of the line hight is PROPORTION to the size of the text. so line-height:2 is a space TWICE of what is set in font-size. another thing this allows you to do is set WHERE in the line the text sits. Using the notebook analogy again . if you have pre-school line-height (3.0) for example… you could write directly on the line, just bellow the top of the previous line or center it. for this you use: vertical-align: [top, middle, bottom, baseline…and so forth]
hope this rant has been enlightening for you.
Yes, thanks.
Debbie
1.3 and 1.3 em are not the same things (but I guess you knew that)
Although initially they have the same effect the 1.3 is a multiplier that is inherited into child elements. On the other hand 1.3em produces a computed line height that is applied to the child elements irrespective of the childrens font-size.
If you had a smaller font in a nested element then then the unitless 1.3 line-height would ensure that the line-height maintains the correct proportion to that font-size. Whereas 1.3em on the parent produces a set line height that even the children will inherit.
A nice graphic explanation, my favourites
So there IS a difference? That might explain why I’ve found omitting the metric to be a completely useless train-wreck cross browser despite everyone else’s wild claims that you can omit it.
Though my rule of thumb remains state your metric – it’s only two characters, and ALWAYS restate your line-height if you change font-size… and NEVER trust the default line-height.
Yes the scaling factor is passed to the child and not the computed line-height.
That might explain why I’ve found omitting the metric to be a completely useless train-wreck cross browser despite everyone else’s wild claims that you can omit it.
Though my rule of thumb remains state your metric – it’s only two characters, and ALWAYS restate your line-height if you change font-size… and NEVER trust the default line-height.
It depends how you work I suppose. If you take care with the line-height (as you do) then it doesn’t matter what you use.
The unitless line height was meant to maintain the relationship between nested font sizes and the line-height. If for example a div has a font-size of 24px and a line-height of 2em the a nested elements will all have a line height of 48px (even nested elements with very small font sizes will have a line height of 48px).
On the other hand a unitless line passes down the scaling factor so that smaller nested font-sizes get smaller line-height to maintain the relationship.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p {margin:0 0 1px;background:#fcc}
.test1,.test2 {
font-size:30px;
line-height:2em;
margin:0 0 25px;
}
.test2 {line-height:2}
.smaller {font-size:10px;background:#f00}
</style>
</head>
<body>
<div class="test1">
<p>This has a computed line-height of 60px</p>
<p class="smaller">This smaller font also has a computed line height of 60px which looks odd</p>
<p>This has a computed line-height of 60px</p>
</div>
<div class="test2">
<p>This has a computed line-height of 60px</p>
<p class="smaller">This smaller font also a computed line height of 20px which matches the text size</p>
<p>This has a computed line-height of 60px</p>
</div>
</body>
</html>
But as you say if you set the line-height at the same times as the font-size then you don’t need to worry about it.