CSSがきれいに揃わないです

Question

前提・実現したいこと

CSSのinline-blockを使って、メモのテキストボックスの横で一番下の位置を揃えたいのですが、
なぜかフォームの位置は上に来るのに、「登録するボタン」が少しだけ下にずれてしまいます。
何が原因なのでしょうか？

対策か、コードを教えていただけると嬉しいです。
よろしくおねがいします。

発生している問題・エラーメッセージ

<h1>ToDoリスト</h1>

<div class="form-box">
    <table class="form">
        <tr>
            <th>予定</th>
            <td><input id="todo" type="text" placeholder="予定を入力" value="予定"></td>
            <th>日時</th>
            <td><input id="date" type="datetime-local"></td>
        </tr>
        <tr>
            <th>お金</th>
            <td><input id="price" type="text" placeholder="金額を入力" value="10000"></td>
            <th>期日</th>
            <td><input id="duedate" type="datetime-local"></td>
        </tr>
        <tr>
            <th>持ち物</th>
            <td><input id="item" type="text" value="持ち物"></td>
            <th>メモ</th>
            <td><input id="memo" type="text" value="めもです"></td>
        </tr>
    </table>
    <div id="addButton"><button type="submit">登録する</button></div>
    <div id="clearButton"><button type="submit">選択削除</button></div>
    <div id="allclearButton"><button type="submit">すべて削除</button></div>
</div>

<table class="main-table">
    <tr class="table-header">
        <th class="header-check"></th>
        <th class="header-id">ID</th>
        <th class="header-todo">予定</th>
        <th class="header-date">日時</th>
        <th class="header-price">お金</th>
        <th class="header-duedate">期日</th>
        <th class="header-item">持ち物</th>
        <th class="header-memo">メモ</th>
        <th class="header-check"></th>
    </tr>
</table>

h1{
    text-align: center;
}

.form-box{
    background-color: rgb(166, 135, 222);
    text-align: center;
}
.form{
    display: inline-block;
    text-align: center;
}
.form th{
    width: 60px;
    margin: 0 auto;
}
.form input{
    width: 250px;
    height: 50px;
}
#addButton{
    padding-right: 80px;
}
.form-box div{
    display: inline-block;
}

補足情報

ここにより詳細な情報を記載してください。

Comments

[K_3578]

提示されてるコードだけだとわかんないですね、画像見る限り下にも何か書いてるようなので、
それが作用している可能性もあります。
一度デベロッパーツールで調べてみましたか？

[umi3]

回答ありがとうございます。
あ、そうなんですね。
承知いたしました、質問を修正します。

すみません、デベロッパーツールは見てみたのですがわかりませんでした・・・

[K_3578]

私も提示コードで確認してみたところ、table下に余白があるようなので、
tableに効いているcssを確認してみてください。

Answer 1

ボタンがずれているというより、table（formクラス）の下に謎の余白ができちゃっていますね。
ちょっとその理由はわからなかったのですが、回避策として、.formにvertical-align: bottom;を入れてみたら余白が消えて解消しました。
解説は他の方に譲りますが、ご参考まで。