CSSでborderやpaddingを内側に指定する方法
こんにちは。テイクです。ホームページを作り続けて9年になります。
「横並べにするためにwidthをぴったり指定したのにborderやpaddingをつけたら崩れた。」
なぜならborderやpaddingはwidthの外側になるからです。
ではこれらを内側に指定して崩れないようにしたい。
そんなときに使えるCSSで「borderやpaddingを内側に指定する方法」を説明します。
borderの内側に余白を作るにはpaddingを指定
まず基本ですが、borderの内側に余白を作るにはpaddingを指定します。
borderのみ
<style>
.example1{
border:1px solid #333;
}
</style>
<div class="example1">borderの内側</div>
paddingあり
<style>
.example2{
border:1px solid #333;
padding:20px;
}
</style>
<div class="example2">borderの内側</div>
その他borderやpaddingの基本はこちら
CSSでborderやpaddingを内側に指定する方法
結論:box-sizing: border-box
borderやpaddingはwidthで指定した範囲の外側に描画されます。
これではいちいちwidthを直さないといけなかったり崩れの原因となります。
box-sizing: border-boxを使うとborderもpaddingもwidthの内側に含めた指定にすることができます。
解説
前提
↓以下のようにfloatを使ってボックスを2つ横に並べていたとします。
width:30%
width:70%
左がwidth:30%、右がwidth:70%、合わせて100%でピッタリですね。
さてここで1pxのborderと10pxのpaddingを指定してみます。
失敗例
width:30%
border:1px
padding:10px
width:70%
border:1px
padding:10px
ハイ崩れました。
30% + 1px × 2 + 10px × 2 + 70% + 1px × 2 + 10px × 2 = 100% + 24px
ということで100%を超えてしまったためです。
calcを使ってwidthを調整することもできますが、borderやpaddingを調整するたび変更しないといけないのでメンドウ!
そこで使うのがbox-sizing: border-box!
これはwidthの数値をborderやpaddingを含めた(内側にした)ものにしてくれるCSSです。
完成形
width:30%
border:1px
padding:10px
box-sizing: border-box
width:30%
border:1px
padding:10px
box-sizing: border-box
html
<div class="floatwrap">
<div class="floatleft">左</div>
<div class="floatright">右</div>
</div>
CSS
.floatwrap{
overflow:hidden;
}
.floatleft{
width: 30%;
background: #fcba03;
float: left;
height: 200px;
border:1px solid #999;
padding:10px;
box-sizing: border-box;/*コレ*/
}
.floatright{
width: 70%;
background: #87dfff;
float: right;
height: 200px;
border:1px solid #999;
padding:10px;
box-sizing: border-box;/*コレ*/
}
これで崩れませんね。
まとめ
CSSでborderやpaddingを内側に指定するには box-sizing: border-boxを使いましょう。
以上、CSSでborderやpaddingを内側に指定する方法でした。