为什么表中有填充？

Question

我正在制作一张桌子，虽然我没有添加任何填充，但表1中的一些（见小提琴）似乎有一个小的填充顶部。我该如何解决这个问题？

http://jsfiddle.net/6a1usq1s/

 <table id="table1">
<tr>
    <th>
        <div class="body-table">VersF)</div>
    </th>
    <th>
        <div class="h2-table">Drse</div>
        <div class="body-table subheading">son</div>
    </th>
    <th>
        <div class="h2-table">sne</div>
        <div class="body-table subheading">Sstz</div>
    </th>
    <th>
        <div class="h2-table">Br</div>
        <div class="body-table subheading">s</div>
    </th>
    <th>
        <div class="h2-table">a</div>
        <div class="body-table subheading">an</div>
    </th>
    <th>
        <div class="h2-table">a</div>
        <div class="body-table subheading">a</div>
    </th>
</tr>

Answer 1

vertical-align:top;

是解决方案：）

Answer 2

默认情况下，您可以尝试取消tr或td的填充以取消使用浏览器中安装的样式：

padding: 0;

然后，您可以设置div或tr / td的高度，并使用line-height属性来规定单元格中文本的提供（如果文本位于一行中）。如果高度等于行高，则文本将在中间垂直向下。

height: 20px;
line-height: 20px;

尝试使用此属性。