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 marginとpaddingの違い・使い分けについて

marginとpaddingはボックスの余白を調整するCSSです。marginとpaddingの使い方や違いについて説明します。

この記事を読む

CSS borderの使い方と種類一覧

CSS borderおよびborderに関連するCSSプロパティの種類一覧を実例とともに紹介します。

この記事を読む

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;/*コレ*/
}

これで崩れませんね。