inline要素の上下余白問題解決！CSSのwidth: fit-content;とは？

コーディングの際に、要素の幅を適切に設定することが重要です。特に、コンテンツの量に応じて幅を自動調整するレイアウトを作る際、「widthをどうするか？」と悩むこともあるのではないでしょうか？

そんなときに役立つのが、width: fit-content; です。fit-content を指定すると、要素の内容に応じた最適な幅に自動調整され、フレキシブルなレイアウトを簡単に実装できます。レスポンシブデザインにも適しており、特にボタンなどの要素に対して便利に活用できます。

さらに、fit-content を使用すると、display: inline; の要素のようなデザインでも上下の margin が適用される というメリットがあります。通常、inline 要素には margin-top や margin-bottom が効きませんが、width: fit-content; を display: inline-block; や display: flex; と組み合わせることで、上下の余白を適切にコントロールできる ようになります。

width: fit-content; の基本的な仕組み

①fit-content の基本的な動作

width: fit-content; を設定すると、要素の幅は以下のルールに従って決定されます。

ルール①コンテンツの幅に合わせる
要素の内容（テキストや画像など）にぴったり合った最小限の幅を取る。

ルール②親要素の制約を受ける
親要素の max-width や min-width によって幅が制限されることがある。

ルール③fit-content の実際の動作は min-content と max-content の間
・min-content : 文字が改行せずに最小限の幅を取る状態
・max-content : 文字が折り返さずにすべて表示される最大の幅
・fit-content はこの min-content と max-content の間で調整される

②fit-content のdemo

width: fit-content; を正しく理解すれば、より柔軟なレイアウトを実装できます。
実際に width: fit-content; を指定した要素の動作をコード例で示します。

例1 : fit-content を適用したボタン

<button class="button">短い文章</button>
<button class="button">長い文章長い文章長い文章長い文章</button>

.button {
  display: block;
  width: fit-content;
　margin: 20px 0 0;/* 上下の margin を適用 */
  padding: 10px 20px;
  border-radius: 20px;
  background: #000;
  color: #fff;
}

例2 : width: auto; や max-content との違い

<div class="box-auto">このテキストはauto</div>
<div class="box-max">このテキストはmax-content</div>
<div class="box-fit">このテキストはfit-content</div>

.box-auto {
  width: auto;
}

.box-max {
  width: max-content;
}

.box-fit {
  width: fit-content;
}

まとめ

width: fit-content; は コンテンツの幅にぴったり合わせる便利な CSS プロパティ であり、ボタンやナビゲーションメニュー、バッジ、フォーム入力欄など、さまざまな場面で活用できます。

✅ 便利なポイント
・余分なスペースを取らず、最適なサイズで表示できる
・ナビゲーションやボタンなどのデザインを簡潔に調整できる

このプロパティをうまく活用すれば、見た目も美しく、無駄のないデザイン を実現できます。ぜひ、日々の Web 開発で width: fit-content; を活用してみてください！