• 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. 特定の番号の要素のcssだけ変更してみよう

  4. CSSで見出しを飾りつけよう

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

  6. cssでマウスをおいた時に動かそう

2021年9月
 12345
6789101112
13141516171819
20212223242526
27282930  
Translate »