サイト運営の備忘録

親ボックスからはみ出ないようにする方法

2020年9月1日

親要素より大きな画像などを配置した時に、width: 100%を指定してもはみ出ないように自動的に親要素に合わせる方法です。

width: 100%を指定すると指定された要素は親要素の大きさに自動的に合いますが、paddingやmarginなどの余白、borderの枠線を親要素が指定している時にはみ出てしまいます。
これを防止するためにはbox-sizingを指定します。

box-sizingは、ボックスサイズの算出方法を指定するプロパディで、幅または高さを持つ全ての要素に適応されます。
・content-box:パディングとボーダーを幅と高さに含めない(初期値)
・border-box:パディングとボーダーを幅と高さに含める
・inherit:親要素の値を継承する

box-sizing: content-box;と指定すれば親要素のpaddingとborderの値を省いた親要素の幅もしくは高さに合うため、はみ出るという現象はなくなります。

CSS関連の他の記事
  • CSSだけで吹き出しを生成

    HTMLとCSSだけで吹き出しをデザインする方法。 HTML側 CSS側 三角の位置はbeforeの一部を変更することで移動できる。 縁取りの吹き出しを作る場合には、:afterに同じ大きさの三角を書き、下向きの三角であ… 続きを読む »