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

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

  6. CSSで画像を背景に貼ってみよう

2021年4月
 1234
567891011
12131415161718
19202122232425
2627282930  
Translate »