できない.dev

CSSでpadding や border を付けても幅がはみ出さないようにするには

width を指定した要素に padding や border を足すと、見た目の幅が指定より広がって親からはみ出す。
box-sizing: border-box で幅の数え方を変え、枠に収める方法を示す。

公開:

プレビュー
<div class="wrap"><div class="box">幅 100% の要素</div></div>
*, *::before, *::after {
  box-sizing: border-box;
}
 
.wrap {
  width: 260px;
  border: 2px solid #94a3b8;
}
 
.box {
  width: 100%;
  padding: 10px 12px;
  background: #fdba74;
  font-size: 14px;
}

box-sizing: border-box を指定すると、width に padding と border が含まれるので、width: 100% の要素に余白を付けても親の幅に収まる。
既定の content-box では余白が width の外側に足されるため、指定した幅より広く描かれるのである。

width: 100% に padding を足すと親からはみ出す

width が指定するのは、既定（box-sizing: content-box）では中身の幅だけである。

padding と border はその外側に足されるため、見た目の幅は指定より広くなる。

width: 100% に左右 padding: 12px を足すと、親より 24px 広い箱になる。

box-sizing: border-box を指定すれば、width に padding と border が含まれる。

箱の幅が width どおりになり、親の幅に収まる。

できない例: width: 100% に padding を足す（右に 24px はみ出す）
.wrap {
  width: 260px;
  border: 2px solid #94a3b8;
}

.box {
  width: 100%;
  padding: 10px 12px;
  background: #fdba74;
  font-size: 14px;
}
できる例: box-sizing: border-box を足す（枠に収まる）
.wrap {
  width: 260px;
  border: 2px solid #94a3b8;
}

.box {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 12px;
  background: #fdba74;
  font-size: 14px;
}

入力欄で起きやすい

フォームの <input> に width: 100% を指定し、padding と border を付けると、同じ理由で親の枠から出る。

テキスト入力欄は既定の box-sizing が content-box のためである。

画面幅が狭いときは、はみ出した分が横スクロールの原因にもなる。

入力欄にも box-sizing: border-box を指定する。

できない例: 入力欄は border-box ではない（枠から出る）
.wrap {
  width: 260px;
  border: 2px solid #94a3b8;
}

.field {
  width: 100%;
  padding: 8px 10px;
  border: 2px solid #2563eb;
  font-size: 14px;
}
できる例: box-sizing: border-box を足す（枠に収まる）
.wrap {
  width: 260px;
  border: 2px solid #94a3b8;
}

.field {
  box-sizing: border-box;
  width: 100%;
  padding: 8px 10px;
  border: 2px solid #2563eb;
  font-size: 14px;
}

全要素に一括で指定する

要素ごとに書き足すと、書き忘れた箇所だけが崩れる。

スタイルシートの先頭で、全要素と疑似要素にまとめて指定するのが定番の書き方である。

width: 50% の列を 2 つ並べるときも、padding を含めて 50% に収まるので、2 列目が下に落ちない。

なお margin は box-sizing に関係なく、いつも箱の外側に足される。

できない例: 指定なし（2 列目が下に落ちる）
.row {
  width: 300px;
  border: 2px solid #94a3b8;
  font-size: 14px;
}
.row::after {
  content: "";
  display: block;
  clear: both;
}
.col {
  float: left;
  width: 50%;
  padding: 10px;
  background: #fdba74;
}
.col + .col {
  background: #93c5fd;
}
できる例: 全要素に border-box（2 列が並ぶ）
*, *::before, *::after {
  box-sizing: border-box;
}

.row {
  width: 300px;
  border: 2px solid #94a3b8;
  font-size: 14px;
}
.row::after {
  content: "";
  display: block;
  clear: both;
}
.col {
  float: left;
  width: 50%;
  padding: 10px;
  background: #fdba74;
}
.col + .col {
  background: #93c5fd;
}