「ブロック要素」と「インライン要素」— 幅と改行の正体

CSSを触り始めて最初にぶつかる壁が、これです。同じように書いているのに、あるタグは横幅の指定が効いて、あるタグは効かない。原因はタグの性質の違いにあります。

2種類の性質がある

代表的なタグを挙げます。おおまかに「文章のかたまり＝ブロック、文中の一部＝インライン」と覚えておけば大きく外しません。

CODE幅の指定が効くもの、効かないものコードを書き換えると、すぐ下で動きます

どちらにも width: 200px を指定していますが、span のほうは効きません。中身のぶんの幅しか持てないためです。

上のデモで、span が2つとも横に並んでいることにも注目してください。インラインは改行されないので、隣に続きます。div は改行されるので、必ず次の行に落ちます。

インライン要素は、上下の margin が効きません。padding は見た目には広がりますが、隣の行を押しのけないため、文字が重なることがあります。「余白を入れたのに動かない」の原因はたいていこれです。

この性質は、CSSの display で変えられます。よく使うのは3つです。

CODEinline-block にすると両方できるコードを書き換えると、すぐ下で動きます

display の行を消すと、幅の指定が効かなくなって横並びだけが残ります。付けたり消したりして違いを見てください。

横並びにしたいだけなら、親に display: flex を書くのが早いです。中の要素は自動的に幅と高さを持てるようになるので、ブロックかインラインかを気にする必要がなくなります。

とはいえ、この2つの性質を知らないと「なぜ効かないのか」が分かりません。原因が説明できるようになると、対処法も自分で選べるようになります。