• 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. 見出しの前に三角形をつけてみよう

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

  4. CSSでテキスト文にインデントをつけてみよう

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

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

2022年1月
 12
3456789
10111213141516
17181920212223
24252627282930
31  
Translate »