コンテンツが垂直方向に中央に配置されたボックスを作成したいのですが、コンテンツがオーバーフローした場合はスクロールします。vertical-align: middle でテーブルを使用して垂直方向のセンタリングを実現できますが、td はスクロールをオーバーフローできないため、スクロール div を td 内に配置し、height: 100% にしました。スクロール div にパディングを与えようとするまでは問題ありません。これにより、td に対して幅が広すぎるため、box-sizing: border-box を与えます。その後、突然、div に上下の余白ができました。
何!?
http://codepen.io/jessehattabaugh/pen/GIjiL
緑の線と赤の線の間にスペースがあってはいけませんが、そこにあります! 緑の div のパディングを変更すると、不思議なマージンが変わります。高さ: 100% は実際には 100% であるかのようです - パディングか何か。パディングまたは box-sizing: border-box を削除すると、消えます。
ボーナス ポイント: なぜ FF はテーブルの高さを尊重しないのですか? Chrome/Saf が行う場合、50% ルールですか?
更新: 境界線の折りたたみまたは境界線の間隔の修正を提案している人もいますが、これらのルールをテーブルに適用すると、次のようになります。
表のセルの赤い境界線は青い表の境界線と一緒に折りたたまれますが、緑の div の境界線にはまだ上下にスペースがあります。ブラウザの高さのサイズを変更して、何が起こるかを確認してみてください。