いつも忘れて思い出すのに時間がかかるCSSテクニック集

HOME > paddingとborderの幅を要素の幅と高さに含めるの巻

paddingとborderの幅を要素の幅と高さに含めるの巻

ボックスにボーダーや余白を指定した場合、ボックスのサイズにボーダーと余白のサイズもプラスされるため、
その分を差し引いてボックスサイズを指定しなければいけないのはなんとも面倒な話。

ボックス幅600px / ボーダー幅1px / 左右の余白30px = 合計幅662px

そこで「box-sizing: border-box;」の一行を付け加えると、
ボーダーや余白のサイズは含まれず、ボックスのサイズに集約されるという便利な命令文です。

ボックス幅600px / ボーダー幅1px / 左右の余白30px = 合計幅600px

HTML

<div class="example12">
<p>ボックス幅600px / ボーダー幅1px / 余白30px = 合計幅600px</p>
</div>

CSS

.example12 {
  width: 600px;
  padding: 30px;
  background-color: #33CCFF;
  text-align: center;
  border: 1px solid #000;
  box-sizing: border-box; /* paddingとborderの幅を要素の幅と高さに含める */
}

↑ページトップへ

HOMEへ