tableに謎のpadding

Question

tableのコーディングをしていたところ、よくわからないpaddingが入ります。なぜでしょうか？

<table>
            <tbody>
                <tr>
                    <td colspan="3" class="table-tit">
                        <p>受講期間<span class="till-number">1</span>ヶ月</p>
                    </td>
                </tr>
                <tr>
                    <th class="table-h">
                        <p class="table-category">社会人</p>
                    </th>
                    <td colspan="2" class="table-b">
                        <p>¥128,000<span class="tax">(税別)</span></p>
                    </td>
                </tr>
                <tr>
                    <th class="table-h">
                        <p class="table-category">学生</p>
                    </th>
                    <td colspan="2" class="table-b">
                        <p>¥99,800<span class="tax">(税別)</span></p>
                    </td>
                </tr>
            </tbody>
        </table>

table {
    width: 320px;
    height: 146px;
    margin: 39px auto 0;
    text-align: center;
}

.table-tit {
    width: 320px;
    height: 50px;
    background-color: #f2f2f2;
    border: 1px solid #ddd;
}

.table-tit p {
    font-size: 20px;
    line-height: 48px;
    font-weight: 500;
}

.till-number {
    font-size: 24px;
    font-weight: 600;
    display: inline-block;
    margin-left: 5px;
}

.table-h {
    width: 117px;
    height: 48px;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd; 
    border-bottom: 1px solid #ddd;
    padding: 0;

}

.table-category {
    font-size: 20px;
    line-height: 47px;
    font-weight: 700;
    color: #64678c;
}

.table-b {
    width: 203px;
    height: 48px;
    border-right: 1px solid #ddd; 
    border-bottom: 1px solid #ddd;
    padding: 0;
}

Answer 1

margin と vertical-align の影響です。

• vertical-align: top; margin: 0; - JSFiddle

Re: Aki9 さん

Comments

[退会済みユーザー]

分かりやすく教えていただきありがとうございます。

Answer 2

テーブルのthセル・tdセルに垂直方向のセンタリングがかかっています。
（おそらく制作環境下のデフォルトの設定です。WordPressならテーマCSSなど）
これはセンタリングされて自動的にできたpaddingです。

CSSで値を指定したpaddingではないので
開発ツールで見ると値が「-」と表示されるのだと思います。