左右マージンありでの、width:100%;の代替案

width:100%; を使用して要素を幅いっぱいに広げた場合、左右にマージンを設定すると、ページに水平スクロールが発生することがあります。この問題に対して従来はcalc()を使用して解決していましたが、CSSの width: stretch を使えば簡単に解決できます。

HTMLのコード

基本的なHTML構造を以下に示します。これを元に各CSSパターンを適用して違いを比較します。

（reset.cssで各ブラウザの初期設定をリセットしています）

  <button>ぼたん</button>

各CSSコードでのwidthの変化

1. width: 100%; の場合

button{
  width: 100%;
  background: bisque;
  color: black;
  font-size: 32px;
}

要素は幅いっぱいに広がります。

2. width: 100%; + margin-inline: 30px; の場合

button{
  width: 100%;
  margin-inline: 30px;
  background: bisque;
  color: black;
  font-size: 32px;
}

100%が親要素の幅に等しいため、左右のマージンが余分に加算され、横スクロールが発生します。

3. width: strech + margin-inline: 30px; の場合

button{
  width: -webkit-fill-available; //strechのchromeの場合
  margin-inline: 30px;
  background: bisque;
  color: black;
  font-size: 32px;
}

width: stretch; をChromeで使用するには、ベンダープレフィックスを付ける必要があります。詳細は Can I Use を参照してください。
また、-webkit-fill-available を使用すると、要素の幅が親要素の利用可能なスペース内に収まります。このため、マージンを指定しても水平スクロールバーは発生しません。
この動作は、width: calc(100% – 30px); と同じ結果になります。

まとめ

・width:100%; を使う場合、水平スクロールを防ぐにはcalc()が必要。

・width: stretch;を使うと、マージンを考慮せずに簡単にレイアウトが調整可能。

注意点: ブラウザ対応状況を確認し、必要ならフォールバックを用意することが重要です。