display:table-cell;で横並びにした時にズレる対処法

paddingなんか指定してないのに…

なぜかズレてる！？

CSSの備忘録です。

• 親要素にdisplay:table;
• 子要素にdisplay:table-cell;

を指定して横並びにしてみたらなんかズレてる！？

どういう訳かtable-cellの上に隙間が空いちゃってる！？

開発者ツールとかで調べてみると何故か指定してないはずのpaddingが入ってる？

・・・という場合の対処法

対処法

table-cellの要素にそれぞれ

vertical-align:top;

を指定すると揃います。