今回はCSSにおけるdisplay:blockとdisplay:inlineの違いについて整理したいと思う。
この2つの違いを理解することは初心者にとってめちゃくちゃ重要だ！
「マジかよ。CSSが効いてないじゃん、、、」
という知識不足の失敗を少しは防ぐことが出来るようになる。
Contents
HTMLタグの初期値にはどちらかが設定されている
HTMLの要素（<p>~</p>や<span>~</span>などのこと）はそれぞれで初期値として
- display:block
- display:inline
のどちらかが設定されている。
※例えば、pタグはblock、aタグはinlineが初期値で設定されている。
それぞれの要素によって初期値が異なるので、marginやpaddingを使って余白を調整しようとしたときに
「あれ？<span>に指定したmarginの指定が全然効かない、、、<p>タグは出来たのに、、、」
という壁にぶつかり、何時間も格闘してしまうCSS初心者が多いと思う（プログラミング小僧は何度もこの壁に絶望させられた(笑)）。
display:blockとdisplay:inlineにはそれぞれ特徴があり、その特徴に合ったCSSの指定をしてあげる必要があるのだ。
「display:block」の特徴とは？
display:block（読み方はディスプレイ：ブロック）の特徴は
- 要素（pタグやimgタグのこと）が横いっぱいに広がる
- 要素が縦に積み重なっていく(横並びにならない）
- 横幅（width)と高さ（height)を調整することが可能
- marginやpaddingで余白の設定が可能
上記がメインだ。
このほかにtext-alignやvertical-alignが効かないという特徴もあるが、初心者はまずは上記4つのポイントをしっかり理解しておくだけでもだいぶ変わる。
1.要素が横いっぱいに広がる
display:blockの1つ目の特徴は
「要素(<p>~</p>など）が横いっぱいに広がる」
ことだ。
2.要素が縦に積み重なっていく(横並びにならない）
display:blockの2つ目の特徴は
「要素が縦に積み重なっていく」
ことだ。
横並びに並ばないことを覚えておきたい。
3.横幅（width)と高さ（height)を調整することが可能
display:blockの3つ目の特徴は
「幅も高さも指定して大きさを調整することが出来る！」
ということだ。
display:blockの要素であれば
「あれ？width:200pxを指定したのに全然変わらない、、、」
という問題とは無縁でいられる(笑)。
4.marginやpaddingで余白の設定が可能
display:blockの4つ目の特徴は
「marginやpaddingで余白の設定が可能！」
ということだ。
display:blockが設定されている要素なら、この2つの余白はどちらも自由に指定することが出来る！
ちなみにdisplay:blockとdisplay:inlneの違いと同じかそれ以上に、paddingとmarginの違いを心から理解できた時の方がプログラミング小僧は圧倒的にCSSのレベルを高めることが出来た。
だから
「paddingとmarginの違いがよくわからない、、、」
という人はこの違いだけは早めに潰しておくことをおすすめする。
display:blockが初期値として設定されている要素一覧は？
display:blockが初期値（何も指定しなくてもdisplay:blockが適用される）に設定されている主な要素は
- <p>
- <div>
- <ul>
- <ol>
- <h1>〜<h6>
- <blockquote>
- <article>
- <dl>
- <dt>
- <dd>
- <address>
上記の通りだ。
これ以外にもあるが、よく使うのを覚えておけばとりあえずOKだろう。
「display:inline」の特徴とは？
では次にdisplay:inline（ディスプレイ：インライン）の特徴についてを整理したい。
display:inlineの特徴は
- 要素は横に並んでいく（横いっぱいには広がらない）
- widthやheightで幅や高さを指定できない（調整できない）
- 左右のmarginは指定できるが、上下のmarginは指定できない
- 上下左右のpaddingは指定できるが、上下のpaddingは他の要素と重なってしまう
などが挙げられる（それ以外にもいくつかある）。
1と2の特徴はdisplay:blockと反対だから覚えやすい。
しかし、3と4の特徴は
「もう少しはっきりしてくれよ！」
と最初の頃は思ってしまった。
まぁ今でも思っているのだが(笑)。
1.要素は横に並んでいく
display:inlineの1つ目の特徴は
「要素は横に並んでいく」
ということだ。
display:blockは要素が横いっぱいに広がるため、要素が縦に積み重なっていく。
しかし、display:inlineは横に並んでいくのだ。
2.widthやheightで幅や高さを指定できない
display:inlineの2つ目の特徴は
「幅を調整するwidthや高さを調整するheightを指定しても調整できない！」
ということだ。
display:blockはwidthで幅を、heightで高さを自在に調整できた。
しかし、display:inlineはそれが出来ない、、、
「そんな不便な！」
と思うかもしれないが、それが現実なのだ。
もしwidthによる幅の調整やheightによる高さの調整がしたければ、その要素にdisplay:blockを指定して変更してしまえばいい。
あくまで初期値がそれぞれ決まっているだけであって、それを変更することはいくらでも可能なのだ。
3.左右のmarginは指定できるが、上下のmarginは指定できない
display:inlineの3つ目の特徴は
「左右のmarginは指定できるが、上下のmarginは指摘できない」
ということだ。
いっそのこと上下左右のmarginは一切指定できない方がわかりやすいのに、、、(笑)
marginは外側の余白。
display:blockは上下左右のmarginを指定して自由に調整できた。
一方、display:inlineは左右のmarginはdisplay:blockと同じように指定して調整できるが、上下のmarginは調整できないのだ。
4.上下左右のpaddingは指定できるが、上下のpaddingは他の要素と重なってしまう
display:inlineの4つ目の特徴は
「上下左右のpaddingは指定できるが、上下のpaddingは他の要素と重なってしまう」
ということだ。
「ん？どゆこと？？」
と突っ込みたくなる気持ちはすごくわかる。
paddingは内側の余白のことだ。
display:inlineもdisplay:blockと同じように上下左右のpaddingを指定して調整することは出来る。
しかし、上下のpaddingを指定すると要素同士が重なってしまうので、display:inlineでは上下のpaddingによる余白は「実質調整できない」と考えておいた方がいいだろう。
display:inlineが初期値として設定されている要素一覧は？
display:inlineが初期値（何も指定しなくてもdisplay:blockが適用される）に設定されている主な要素は
- <a>
- <span>
- <img>
- <input>
などが挙げられる。
※一部例外として<img>などはdisplay:inlineなのにwidthやheight、marginの上下も指定して調整可能だ。
