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つだと思っています。
皆さんのより良いコーディングに役立つと幸いです!

こちらもおすすめ!

関連記事

  • 2021.10.01

    【コピペで簡単!】CSSのみで作るシンプルなセレクトボックス(矢印の消し方や枠のサイズ変更方法も解説)

    CSS

  • 2021.08.03

    【コピペOK】パンくずリストの設置方法(便利なプラグインも紹介)

    CSS

  • 2021.07.29

    【おすすめ書籍】一冊で固められる基礎!超欲張りな参考書

    CSS

    HTML5

    JavaScript

おすすめ記事

  • 2021.09.29

    【簡単】プロのようなデザインが作れるツールCanva(キャンバ)のおすすめポイント

    その他

  • 2021.09.10

    JavaScriptの基礎をスピーディーに学べる!初心者におすすめの教本を紹介

    JavaScript

  • 2021.09.14

    【薄くて軽い!】超おすすめパソコンスタンド

    その他

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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