spanにwidthを書いても広がらない？inlineとinline-blockで箱を比べよう

文字を囲んだspanへwidthを書いたのに、横幅が変わらない。数字の単位が合っていても、その要素の表示の種類が関係していることがあるよ。

このページでは、文字を囲む普通のspanに幅と高さを指定し、inline・inline-block・blockを比べる。準備はブラウザだけ。HTMLの要素を、画面では箱として配置していることを小さく確かめよう。

inlineは、文章の流れに入る箱

<span>前</span><span class="target">対象</span><span>後</span>

.target {
  display: inline;
  width: 150px;
  height: 70px;
}

普通のspanのような、画像などではないinlineの要素には、widthやheightで指定した幅・高さは適用されない。作例の「対象」は、150×70pxの箱にはならず、文字に応じた大きさで文章の中へ入るよ。

ここで扱うのは通常の文字を含むspan。imgなど、表示の内容や寸法に別の規則がある要素まで、全部同じとは考えないでね。

inline-blockは、幅を持たせつつ行の中へ置ける

.target {
  display: inline-block;
  width: 150px;
  height: 70px;
}

inline-blockへ変えると、作例では150×70pxの箱になる。前後の文章と同じ行へ置ける性質を持ちつつ、箱の幅・高さを指定できるんだ。

ただし、親の行に収まらないほど横幅があれば、次の行へ送られることがある。「inline-blockなら、どんな幅でも必ず一行に収まる」という意味ではないよ。

blockなら、幅が小さくても行が分かれる

さらにblockへ切り替えると、指定した150×70pxの箱になり、前後の文字とは行が分かれる。幅を150pxにしていても、その横に次の文字が同じように続くとは限らないんだ。

作例はFlexやGridの項目にはしていない。それらの中では表示の扱いや配置に別の規則が加わるため、まずは普通の文章の流れで比べよう。

ページ内で見た目と実測を確認する

1. 初期状態のinlineで、黄色い「対象」の文字と表示欄の幅・高さを見る。
2. inline-blockを選び、150×70pxになることを確認する。
3. blockを選び、寸法は同じでも「前」「後」と行が分かれることを見る。
4. 「最初から試す」でinlineへ戻す。

黄色い箱の外周には、寸法を増やさないoutlineで線を付けている。枠線やpaddingによる足し算と、displayの違いを混ぜないためだよ。

期待どおりにならないときの確認

開発者ツールで、対象に実際に適用されているdisplayを見る。別のCSSで上書きされていないか、親がFlexやGridになっていないか、幅に別の制約がないかを順に確認しよう。

また、箱に入らない長い内容を用意した場合は、幅だけでなく折り返しやはみ出しの扱いも必要になる。箱が150pxになったことと、文字が必ず収まることは別だね。

編集部では2026年10月29日にMDNの適用対象を確認し、スマホ幅・PC幅で三つの表示、実測寸法、リセットを検証した。box-sizingの幅、はみ出しの扱いも一緒に読めるよ。