💠

複数の button タグの間に謎の余白が作られる

2021/05/09に公開

CSS

Tips

スタイリング

tech

こんにちは．株式会社ゆめみ の Keeth こと桑原です．
<s>今回の内容はフロントエンドエンジニアであればご存じの方も多いかもしれませんが，お恥ずかしいことに私は知らなかったので備忘録として書き残したいと思います．</s>
<b>2024/11/06 追記</b>
これは単に <button> タグがインライン‐ブロック要素であり，以下の Codepen のコードのように，改行や空白など HTML タグ間に余白があると画面にもそのように表示されているだけでした．

 発生した事象タイトル通りと言えばそうなんですが，百聞は一見にしかずということで，Codepen のデモを貼ります 👇
ご覧いただくと分かるように，border, padding を 0 で初期化したとしても，余白が設定されていることが分かるかと思います．この余白を消す方法としては以下の方法が考えられます．
div {
  display: flex;
}

/* または */

div {
  font-size: 0;
}
ちなみに， border, background の設定を外すと，ブラウザ固有のスタイリング（今回は border）が設定されるため，余白が生じますのでご注意ください．
ではでは(=ﾟ ω ﾟ)ﾉ

発生した事象

Discussion