CSS

2021.04.21

【CSS】要素がはみ出てしまう時のチェック事項 / box-sizingの指定

私がコーディングを学び始めた頃、なぜか子要素が親要素をはみ出てしまうということがよく起きていました。
今回は、その原因だったbox-sizingの指定についてご説明します。

border-boxの値

border-boxの値は、content-boxborder-boxの2つです。
▼参考
https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing

content-box

こちらは、border-boxの初期値です。
widthheightmargin / padding / border の領域を含みません。

border-box

こちらを指定するとwidthheightmargin / padding / border の領域が含まれます。

content-box / border-boxの指定例

See the Pen box-sixing by spiqa design (@spiqa_design) on CodePen.

上記の例では、子要素のコンテンツにwidth:100%borderを指定しています。

border-boxでは親要素にきっちり収まっているのに対し、content-boxではborderの幅分、右にはみ出してしまっています。

また、flexboxで要素を横並びにしたい時など、このborder-boxを指定してないと想定しないところで折り返してしまったり、要素をはみ出てスクロールバーが出てしまったりすることがあります。

個人的には、border-boxを指定していた方が高さは幅の計算がしやすくコーディングを行いやすいので、最初に指定しておくと良いCSSの1つだと思っています。
皆さんのより良いコーディングに役立つと幸いです!

こちらもおすすめ!

0

関連記事

  • 2021.05.14

    【CSS】backgroundで行う背景画像の複数指定

    CSS

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

  • 2021.04.09

    コーディング作業に役立つサイト5選

    CSS

    その他

おすすめ記事

  • 2021.04.05

    【jQuery】jQueryのみでPC/SPの画像を切り替える方法

    JavaScript

  • 2019.03.15

    【WordPress】固定ページにページネーションを効かせる方法

    WordPress

  • コーディングで画像を好きな形に切り抜く方法

    2021.02.10

    【CSS】コーディングで画像を好きな形に切り抜く方法【IEにも対応】

    CSS

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!