Page is a not externally linkable
JAB_Creations - 7:16 pm on Feb 21, 2006 (gmt 0)
Here are some of my questions that I'm looking for clarification on... How come font-size: 10px; has text rendered 8px in height? When font-size is set to 14px it renders the text 10px. Besides the missing 2px in height of the font itself what is the additional 2px of padding coming from if the border, margin, and padding are all set to 0px? Why does line-height act as a margin for spans but act as a padding for paragraphs? Which is the correct behavior? It seems that paragraphs have had inline-block display yet other elements still are not supported? I know paragraphs are supposed to be inline but if they are how come their width expands like a block element? Here are the examples I've been using with Firefox 1.5, Opera 8.01, 8.52, and 9PR2. <body>
I've passively noticed over time how the height of inline elements do not seem to add up correctly. I recently did a search online for a CSS inline model but could not find anything. For my questions I have a reference page below... <?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en">
<head>
<title>CSS Inline Model</title>
<style type="text/css">
body
{
background: #000;
}
br
{
border: 0px;
margin: 0px;
padding: 0px;
}
p
{
background: #ff0;
font-size: 14px;
line-height: 14px;
border: 0px;
margin: 0px;
padding: 0px 0px 0px 20px;
}
p.p2
{
background: #0f0;
font-size: 14px;
border: 0px;
margin: 0px;
padding: 0px 0px 0px 40px;
}
span
{
background: #f0a;
font-size: 14px;
border: 0px;
padding: 0px;
margin: 0px;
}
span.s1
{
background: #f00;
font-size: 14px;
line-height: 14px;
}
span.s2
{
background: #0f0;
font-size: 10px;
line-height: 14px;
}
</style>
</head>
<div>
<p>P - THIS P'S FONT-SIZE IS SET TO 14PX BUT RENDERS AS 10PX.</p>
<p class="p2">P - SAME AS ABOVE BUT WITHOUT LINE-HEIGHT DECLARED.</p>
<span>SPAN - 14 PX NORMAL SPAN RENDERED 16PX HIGH WITH FONT-SIZE RENDERING 10 PX IN HEIGHT.</span>
<br />
<span class="s1">SPAN ONE</span><span class="s2">SPAN TWO</span>
<br />
<span class="s1">SPAN ONE</span>
<br />
<span class="s2">SPAN TWO</span>
<br />
<span class="s2">SPAN TWO</span>
</div>
</body>
</html>