html - table 高度错误

Question

为什么我在这个例子中得到错误的表格总高度:http://jsfiddle.net/nfb82/

我为每个单元格指定了高度和宽度。我总共需要获得 160x90 的表格尺寸。当我得到错误的高度时，宽度计算正确。此外，在我的站点中我得到 97px，在 jsfiddle 示例中我有 101px。 我考虑过可能会考虑的边框，但为什么我得到正确的宽度。我还尝试更改高度(将每个单元格高度降低 1px)但无论如何我得到了错误的高度

HTML:

<div class="template-markup _16x9" data-template-id="2">
    <table>
        <tbody>
            <tr>
                <td rowspan="2" style="width: 128px; height: 72px;">1</td>
                <td style="width: 32px; height: 32px;">2</td>
            </tr>
            <tr>
                <td style="width: 32px; height: 40px;">3</td>
            </tr>
            <tr>
                <td colspan="2" style="height: 18px; width: 160px;">4</td>
            </tr>
        </tbody>
    </table>
    <div class="resolution">1920x1080</div>
</div>

CSS:

.template-markup {
    float: left;
    margin-right: 20px;
}
    .template-markup table {
        border: 1px solid #333;
        border-collapse: collapse;
    }
        .template-markup table tr td {
            border: 1px solid #333;
            vertical-align: middle;
            text-align: center;
            cursor: pointer;
            transition: background-color 0.2s, color 0.2s;
        }
        .template-markup table tr td:hover {
            background-color: #DDD;
        }   
        .template-markup table tr td.selected {
            background-color: #333;
            color: #FFF;
        }
    .template-markup .resolution {
        text-align: center;
        clear: both;
        height: 30px;
        margin-top: 5px;
    }
    .template-markup._16x9 {
        width: 160px;
    }
        .template-markup._16x9 table {
            width: 160px; 
            height: 90px;
        }

Answer 1

我想这是因为表格元素上也设置了填充和边框值

http://www.w3schools.com/css/css_boxmodel.asp