CSSの余白が効いたり効かなかったり…何で？

こんにちは！

今回も、受講者さんからの疑問を、ブログにさせていただきます。

「余白が反映されたり、されなかったり・・・
　何でなのか分かりません(;_;)泣」

ふむふむ。

ありますよね、同じCSS書いてるのに、余白が反映されたりされなかったり・・・

それ以外にも、幅や高さ指定しているのに効かなかったり・・・

具体的な事例

具体的に事例をみていきましょう。

例文１

<p class="byellow" style="width:150px; margin:0 auto 1em; padding:1em;">Pタグ 幅150px 左右外余白あり</p><a class="byellow" style="width:150px; margin:0 auto; padding:1em;">aタグ 幅150px 左右外余白あり</a>

上記は、pタグ、aタグ、の例文です。

どちらのタグも、幅150pxに指定され、左右に外余白が設けられています。

pタグはこの指定がきちんと反映されていますが、aタグはpタグと様子が違いますね。

指定した幅が反映されず、そのせいで左右の外余白もありません。

（右側には余白があるように見えますが、今回指定した外余白[margin:0 auto;]は左右両方に同じだけ余白ができるはずです。）

どうしてこのようなことが起こるのでしょうか・・・？

CSSを気にするのではなく、まず気にして欲しいのはHTMLタグです。

pタグも、aタグも、両方同じCSSを記載しているので、タグにどんな違いがあるのか知ることが先決です！

ブロックレベル要素とインライン要素

ブロックレベル要素、インライン要素。
（ブロックレベル要素は、以降ブロック要素と記載します。）

pタグとaタグは、違う要素。

pタグはブロック要素、aタグはインライン要素なんです。

この２種類があること、知ってましたか？

もしくは、名前は聞いたことがあっても、違いは知らない、なんて方もいらっしゃるのではないでしょうか。

ブロック要素、インライン要素、どのようなものか見ていきましょう。

ブロック要素

ブロック要素は、1行丸ごと使用し、改行されます。
例えば、pタグを連続で記載すると、都度改行されます。

<p style="background:#eee;">ブロック要素</p><p style="background:#eee;">ブロック要素</p><p style="background:#eee;">ブロック要素</p>

上記は、pタグを３つ、連続で記載した例ですが、横並びではなく、都度改行されていますよね。

また、背景色をみてもわかるように、「ブロック要素」という文字の部分だけではなく、1行丸ごと使用しているのが分かります。

インライン要素

インライン要素は、改行されずに横に並びます。
例えば、aタグを連続で記載すると、親要素の幅の中で横に並んでいきます。

<a style="background:#eee;">インライン要素</a><a style="background:#eee;">インライン要素</a><a style="background:#eee;">インライン要素</a>

上記のように、aタグを３つ並べて書くと、改行されずに、横に並ぶのが分かります。

pタグは1行丸ごと使用していましたが、aタグは文字が書かれている分しか幅をとりません。

また、幅指定をしても効かないのがインライン要素です。

幅指定しても効かないから、外余白も反映されなかったんですね。

同様の理由で、文字揃えも、右寄せ、中央揃えの指定も反映されないんです。

pタグのように1行丸ごと使用しないため、左に左に・・・と左寄せになってしまいます。

インライン要素にも幅指定したい

ブロック要素、インライン要素の違いはわかったけど、インライン要素には幅指定できないの？
外余白つけられないの？

いえいえ、そんなことはないのでご安心ください！

CSSで擬似的にブロック要素、インライン要素に見えるようにしていきましょう。

例文２

<p class="byellow" style="width:150px; margin:0 auto 1em; padding:1em;">Pタグ 幅150px 左右外余白あり</p><a class="byellow" style="display:block; width:150px; margin:0 auto; padding:1em;">aタグ 幅150px 左右外余白あり</a>

例文1に、おまじないを一つだけ足してみたのですが、分かりますか？

aタグに

display : block ;

という指定をしました。

これは、擬似的にブロック要素に見せる、という意味のCSSです。

あくまでも、CSSでブロック要素のように、しているだけでブロック要素に変わったわけではありません。

ですが、これでaタグもpタグのように見栄えを調整をすることができます。

例文３

<p class="byellow" style="display:inline; width:150px; margin:0 auto 1em; padding:1em;">Pタグ 幅150px 左右外余白あり</p><a class="byellow" style="width:150px; margin:0 auto; padding:1em;">aタグ 幅150px 左右外余白あり</a>

逆に、ブロック要素を擬似的にインライン要素に見立てることもできます。

例文３では、pタグに

display : inline ;

という指定をしました。

pタグがインライン要素と同じように、幅指定も効かず、外余白も効かなくなりましたね。

横に連続でpタグを書いていきたい場合には使えそうです。

最後に

ブロック要素とインライン要素の違いを知ることで、CSSでできないことの原因を探ることができましたね。

また、CSSで擬似的に、ブロック要素、インライン要素のように見せる方法もわかりました。

ですが、これは一例です。

いろいろなケースがあると思いますが、まずは上記を参考にやってみる、それでもだめなら他の方法も探ってみて欲しいなと思います。

あと、インライン要素の中にブロック要素を入れるのはNGですからね〜！
例えば、
<a><p>ほげほげ</p></a>
など。

あげればキリがないのですが^^;

本日の参考サイトは以下になります。

https://www.w3schools.com/html/html_blocks.asp

どのタグがブロック要素でインライン要素かも載ってますので、参考にご覧ください！

ご意見あればコメントくださいね♪

ではでは〜〜^^