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

2016年4月28日
とっつぁん
css WEBデザイン
この記事は 1 分くらいで読めると思います
なぜかズレてる!?
なぜかズレてる!?

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

なぜかズレてる!?

なぜかズレてる!?

CSSの備忘録です。

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

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

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

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

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

対処法

table-cellの要素にそれぞれ

vertical-align:top;

を指定すると揃います。