こんにちは。テイクです。ホームページを作り続けて9年になります。
「横並べにするためにwidthをぴったり指定したのにborderやpaddingをつけたら崩れた。」
なぜならborderやpaddingはwidthの外側になるからです。
ではこれらを内側に指定して崩れないようにしたい。
そんなときに使えるCSSで「外側にあるborderを内側に指定する方法」を説明します。
borderやpaddingの基本はこちら
結論からいうと外側にあります。
枠線なし背景あり
枠線あり背景あり
枠線あり背景なし
heightを100pxと指定したうえでborderを20px指定しているのでborderを含めた高さは140pxとなっています。（widthはautoです。）
枠線の色はオレンジに見えますが実際は「rgba(255,0,0,0.5)」つまり半透明の赤を指定しています。枠線は黄色背景の上に重なっているということです。
borderはheightには含まれないが背景色の上にある、という状態です。
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
結論：box-sizing: border-box
borderやpaddingはwidthやheightで指定した範囲の外側に描画されます。
これではいちいちwidthを直さないといけなかったり崩れの原因となります。
box-sizing: border-boxを使うとborderもpaddingもwidthの内側に含めた指定にすることができます。
枠線なし背景あり
枠線あり背景あり
枠線あり背景なし
先述の例ではborderはheightに含まれていませんでしたが、box-sizing: border-boxを指定したことでborderがheightに含まれ、完全に内側に入りました。
CSSでborderやpaddingを内側に指定するには box-sizing: border-boxを使いましょう。
以上、CSSで外側にあるborderを内側に指定する方法でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
