ホーム(記事一覧)へ

CSSで外側にあるborderを内側に指定する方法

こんにちは。テイクです。ホームページを作り続けて9年になります。

「横並べにするためにwidthをぴったり指定したのにborderやpaddingをつけたら崩れた。」

なぜならborderやpaddingはwidthの外側になるからです。

ではこれらを内側に指定して崩れないようにしたい。

そんなときに使えるCSSで「外側にあるborderを内側に指定する方法」を説明します。

borderやpaddingの基本はこちら

borderは背景の内側にあるか外側か

結論からいうと外側にあります。

枠線なし背景あり

枠線あり背景あり

枠線あり背景なし

heightを100pxと指定したうえでborderを20px指定しているのでborderを含めた高さは140pxとなっています。(widthはautoです。)

枠線の色はオレンジに見えますが実際は「rgba(255,0,0,0.5)」つまり半透明の赤を指定しています。枠線は黄色背景の上に重なっているということです。

borderはheightには含まれないが背景色の上にある、という状態です。

CSSでborderやpaddingを内側に指定する方法

結論:box-sizing: border-box

borderやpaddingはwidthやheightで指定した範囲の外側に描画されます。

これではいちいちwidthを直さないといけなかったり崩れの原因となります。

box-sizing: border-boxを使うとborderもpaddingもwidthの内側に含めた指定にすることができます。

box-sizing: border-boxを指定した例

枠線なし背景あり

枠線あり背景あり

枠線あり背景なし

先述の例ではborderはheightに含まれていませんでしたが、box-sizing: border-boxを指定したことでborderがheightに含まれ、完全に内側に入りました。

まとめ

CSSでborderやpaddingを内側に指定するには box-sizing: border-boxを使いましょう。

以上、CSSで外側にあるborderを内側に指定する方法でした。

関連記事