はじめに

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を指定することで、親要素の大きさを超えないようになります。
お困りの方のお力に慣れれば幸いです。