箱・余白

`max-width` 幅の上限を決める

重要度5 / 5

意味

これ以上は広くしない、という上限です。記事の本文に max-width: 40rem を付けると、大きな画面でも1行が長くなりすぎません。width: 100% と一緒に書くと、狭い画面では親に収まり、広い画面では上限で止まります。

上限だけを書き、左右の配置は margin-inline: auto に分けると、あとから直しやすいです。

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

HTML

<div class="article">広い画面でも、この幅より広がりません。</div>

CSS

.article {
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  background: #efeef8;
  padding: 0.75rem 1rem;
}

プレビュー

長さを計算して入れる書き方です。関数の一覧から詳細を開けます。

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