マンガでわかるホームページ作成

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

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

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

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

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

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

borderの内側に余白を作るにはpaddingを指定

まず基本ですが、borderの内側に余白を作るにはpaddingを指定します。

borderのみ

borderの内側
<style>
.example1{
border:1px solid #333;
}
</style>
<div class="example1">borderの内側</div>

paddingあり

borderの内側
<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を内側に指定する方法でした。

関連記事