事象
Webページを作成した際に、テキストボックスなど複数の要素を横幅指定して並べていたところ、横幅が揃わずがたがたになってしまった。
以下のサンプルを見てもらうとわかる通り、すべての要素に幅250px、高さ30pxを指定しているがどう見てもそうは思えない。
See the Pen 高さ・幅が揃わない by M (@Mio-K0408) on CodePen.
考えたこと
開発ツールを用いて1つずつ要素を確認していくと高さや幅の指定がちゃんと効いてはいる。要素ごとに縦横の指定の反映の仕方が異なるのかと思い1つずつwidthやheightの指定を細かく設定しないといけないのかと思ったがそんなことはしたくないので方法を調べた。
実際の解決方法
CSSで横幅や高さを指定するとデフォルトで「box-sizing:content-box」が設定されているらしく、それにより要素自体の縦横は指定できても、追加でpaddingなどが付与されてしまう。
そうではなく、指定した縦横に余白込みで揃えたいときは以下を設定すると良い。
box-sizing: border-box;
これにより余白などすべて含めたうえで指定したサイズになってくれる。
See the Pen 高さ・幅をそろえる by M (@Mio-K0408) on CodePen.
確かに、最初のと比べるときれいに要素が揃っている。
フロントを触る機会が増えてきたがなかなかがっつりHTMLやCSSを触る機会がないので疑問に思ったことやしっくりこないことを調べて随時キャッチアップしていくことの大切さを実感した。レイアウトをきれいにするって本当に大変。
参考記事