错误的桌子高度

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