What is in a font size?

Hi!

When I specify:

font-size: 22px;

Does that mean that the width of an alphabet on the screen is 22px or the height is 22px?

Thanks.

It kind of means the distance between the baselines, as long as no extra leading (line-height) is added.

Hi,
It’s going to be in relation to the height.
The letter “B” would always be wider than the letter “I” (except when using monospace).

It also appears to base that height on the capital letters and numbers, here is a quick test case using 22px font with a 22px line-height. Normally you would not set the line-height the same since you need room for text descenders.

The BG color shows that the height extends slightly above and below the capital letters (when using arial font).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>

<style type="text/css">
li {
    margin:10px 0;
    font: 22px/22px arial;
    background:cyan;
}
</style>

</head>
<body>

<ul>
    <li>ABCDEFGHIJK</li>
    <li>abcdefghijk</li>
    <li>123456789</li>
</ul>

</body>
</html>

thanks

For the height of a font (or the room it takes up on the page) you also have to take into consideration the line height, and for the height of the line you need to know about the inline-box model, and if you like heavy reading then most of the details are explained here, [URL=“http://www.slideshare.net/maxdesign/line-height”]here and [URL=“http://www.w3.org/TR/CSS2/visudet.html#line-height”]here :slight_smile:

Scroll down to “Computing the heights and edges of a non-replaced inline box”
http://dbaron.org/css/2000/01/dibm-20000113

Nice visual diagram.

Yes interesting article also and just goes to show that inlne-box model is perhaps one of the most complicated and misunderstood aspects of css.:wink:

Maybe they should have tried to make it less complicated.

Recently I had some inlines I wanted to add vertical padding to. I already knew I could not do vertical margins but I was perplexed by my needing to make these anchors blocks or inline-blocks to get vertical padding. It was probably specific to the rest of my code but it reminded me that I (and so, other people surely) miss the weird stuff in teh specs. Which are also not the easiest things to read either.

Yes perhaps, but as you start to look at details of what must happen it just gets complicated if you want a useful system. I’m sure it doesn’t need to be as complicated as it is though.

Recently I had some inlines I wanted to add vertical padding to. I already knew I could not do vertical margins but I was perplexed by my needing to make these anchors blocks or inline-blocks to get vertical padding.

Vertical margins have no effect on inline content but you can add vertical padding although it will not influence other lines and indeed will overlap the other lines. If you apply a background-color to the element you added padding to you can see that padding has been added but it just overlaps other lines without affecting their position. Note that IE6 and 7 need position:relative before they will show the full background color for the padding on that inline element.


<!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>
span {
    padding:25px;
    background:red;
    position:relative
}
</style>
</head>
<body>
<p>This is some text  This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text <span>Span Text </span> This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text </p>
</body>
</html>


Increasing the line-height to match the padding will ensure that the lines are spaced far enough apart for the padding not to overlap.