width:100%の代わりにwidth:stretchを使う

width:100%とmarginを組み合わせたときに、親要素の幅を超えてしまうことがある。その場合、margin分を減算してwidthに設定する必要がある。

.button {
  margin-inline: 1rem;
  width: calc(100% - 2rem);
}

そんなときに width:stretchを使うと、marginの計算なしで親要素の幅に合わせられる。 ただし、執筆時点ではChrome 138/Edge 138のみサポートしている。Firefoxは-moz-available、Safariは-webkit-fill-availableのベンダープレフィックス付きのキーワードが必要。

.button {
  margin-inline: 1rem;
  width: stretch;
  width: -moz-available; /* Firefox */
  width: -webkit-fill-available; /* Safari */
}

デモ

追記: 2025-06-25

状況によるため一概には言えないが、 コンポーネント自体にmarginを持たせるとコンポーネントの外側に影響を与えるため再利用性が低くなる。 そのため、個人的には親要素にpaddingを設定したい。

.container {
  padding-inline: 1rem;
}

.button {
  width: 100%;
}