エンジニアのひよこ_level10

【毎日更新!】新卒4年目エンジニアブログです!

【HTML】インライン要素とブロック要素の違いと使い方メモ1【878日目】

このメモは

いつかHTMLの説明に使いたいなと思ったことをメモします。

なので、間違っていることがあれば、指摘していただけると嬉しいです。

ブロック要素とは?

端的に言うと箱。
『横幅マックスの』幅の箱を用意します。
何もしなくても、横幅はマックスです。(widthとか指定しなければ)

<div>
    <div>
    </div>
</div>

これは、箱の中に箱が入っているやつ。
箱の中に箱が入っているので、基本的には、外側の箱より内側の箱は大きくならない。
(浮かせるとか、マイナスを入れるとかしなければ)

インライン要素とは?

箱に対して、中身の要素。

<div>
りんご
</div>

こう書いても、この中の『りんご』という文字はインライン要素。

違いがわかるとどう良い?

インライン要素に対して、widthを書くのに違和感を感じるはず。
ただ、一部はwidth効くので、それは特殊なインライン要素。
(imgやinputタグとか)

text-align: centerというのは、『箱の中身を中央揃え』していると考えられるので、
親要素のdivにかけて、中身が中央揃えになっていると理解できると思います。

marginは箱の外側の空白を調整することを覚えておけば、
margin: 0 autoが中央揃えになる理由は、箱に対して左右の marginを均等に自動的にしてくれるから、
中央揃えになるとわかる。

ブロック要素に margin: 0 autoしても変わらない時、変わらないと言っているそれは中身(インライン要素)でしょうか。
要素の特性を推測すると、意識しやすいかもしれません。

これで、『なんで中央揃えにならないんだー』がピンと来やすくなると思います。