Box-Model for inline vs. block elements within a table td
I'm using a table to display tabular data, but I need to get the sizing pixel-perfect so that the contents don't end up taking more vertical space than I have available. Also, layout using css alone isn't feasible because I have dozens of elements.
Here is my simple test code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
table, td, tr, thead, tfoot, tbody, th, tf {
border-collapse: collapse;
margin: 0px;
padding: 0px;
border:0;
line-height:16px;
}
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr style="height:16px">
<td>
<span style="font-size:10pt;">Here is some text</span>
</td>
</tr>
开发者_JAVA百科</table>
</body>
</html>
Basically I want the row of the table to take up only 16px, however, in this configuration it ends up taking 17px.
Inspecting the elements in FireBug it shows the span at 15px but the td and tr at 17, yet no padding, no border, etc...
In IE I get the same behavior, however there is a little more information about my mysterious extra pixel or two, seems there is an offset on the span element:
Finally, I can fix the problem by turning my span element into a div, (or by making the span element display:block, or even display: table-cell which I don't really understand). So I don't really need help solving my problem, but I want to understand why inline elements within table cells end up taking more space then they should. I tried google and the w3c spec but couldn't find anything useful.
Could it be something like the line-height of the span?
Edit: I realized that I didn't really answer the question. I did some poking around in Firebug (I'm on a Mac, so no access to IE at the moment), and it looks like it's not the span itself that's pushing the cell's height, but that the line-height of the td does end up controlling the height of the td. The height of the span is only 14px. I suspect that it's the empty text node (show's in IE's dev tools) that's pushing the height. One way to see this is to move the font-size specification up a node or two so that it will apply to the empty text node as well. At least in FB that seems to fix it and demonstrate that the span isn't the issue. (Maybe the empty text node doesn't exist if you use a div instead? Do you even need a span or a div, or could you have your text right in the td?)
加载中,请稍侯......
精彩评论