• css

borderが横幅からはみ出てしまう

はじめに

borderをdivタグに指定したのですが、親要素の大きさを超えて困っています。どうしたらよいでしょうか?
borderをdivタグに指定して、親要素の大きさを超えないようにする方法は、cssで調整することができます。
cssでborderが親要素を超えないようにできるんですね。
そうです。デフォルトの状態では、divにwidthを指定した場合、borderのサイズは考えないような設定になっています。
サンプルと合わせて見ていきましょう。

borderを指定したら親要素の大きさを超えてしまった

borderの指定したら親要素の大きさを超えてしまった場合について説明していきたいと思います。box-sizingを指定することで、この問題を解決することができます。デフォルトの状態では、paddingやborderの大きさはwidthに含めませんという設定になっています。そのため、親要素の大きさを子の要素がwidthを指定して、borderを使用すると親要素の大きさを超えてしまうという状態になります。

box-sizing:content-box

デフォルトの状態では、このような状態になります。親要素の大きさをborder-box:contentでは、borderの大きさをwidthに含めていないので、はみ出てしまいます。

親要素

子要素

box-sizing:border-box

このように、box-siging:border-boxを子要素に指定することで、widthにborderの大きさが含まれるようになるので、親要素の大きさを超えないようになります。

親要素

子要素

このようにbox-sizingを指定することで、親要素の大きさを超えないようになります。
お困りの方のお力に慣れれば幸いです。

関連記事

  1. CSSを使って画面サイズに対応しよう

  2. 特定の番号の要素のcssだけ変更してみよう

  3. 画像をhoverして時にズームさせるcssを書こう

  4. cssで矢印を作ろう

  5. cssでフェードをかけてみよう

  6. hoverした時に文字の間隔をつかってアニメーションしてみよう

2020年9月
 123456
78910111213
14151617181920
21222324252627
282930