`calc()` 足し算や引き算で幅を決める

重要度4 / 5

意味

幅や余白を、別の長さから計算したいときに使います。calc(100% - 2rem) は、親の幅から余白の分だけ引いた幅です。% と rem のように単位が違う値を、一つの引き算に書けます。

演算子の前後には半角スペースを入れます。100%-2rem のようにつなげると、意図どおり計算されないことがあります。最小と最大の範囲に収めたいときは clamp() です。

HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。

HTML

<div class="card">親の幅から、左右の余白を引いた幅です。</div>

CSS

.card {
  width: calc(100% - 2rem);
  margin-inline: 1rem;
  background: #efeef8;
  padding: 0.75rem 1rem;
}

プレビュー

出典: MDN Web Docs（`@mdn/browser-compat-data`）