このメモは
いつかHTMLの説明に使いたいなと思ったことをメモします。
なので、間違っていることがあれば、指摘していただけると嬉しいです。
ブロック要素とは？
端的に言うと箱。
『横幅マックスの』幅の箱を用意します。
何もしなくても、横幅はマックスです。(widthとか指定しなければ)
<div>
<div>
</div>
</div>
これは、箱の中に箱が入っているやつ。
箱の中に箱が入っているので、基本的には、外側の箱より内側の箱は大きくならない。
(浮かせるとか、マイナスを入れるとかしなければ)
インライン要素とは？
箱に対して、中身の要素。
<div> りんご </div>
こう書いても、この中の『りんご』という文字はインライン要素。
違いがわかるとどう良い？
インライン要素に対して、widthを書くのに違和感を感じるはず。
ただ、一部はwidth効くので、それは特殊なインライン要素。
(imgやinputタグとか)
text-align: centerというのは、『箱の中身を中央揃え』していると考えられるので、
親要素のdivにかけて、中身が中央揃えになっていると理解できると思います。
marginは箱の外側の空白を調整することを覚えておけば、
margin: 0 autoが中央揃えになる理由は、箱に対して左右の marginを均等に自動的にしてくれるから、
中央揃えになるとわかる。
ブロック要素に margin: 0 autoしても変わらない時、変わらないと言っているそれは中身(インライン要素)でしょうか。
要素の特性を推測すると、意識しやすいかもしれません。
これで、『なんで中央揃えにならないんだー』がピンと来やすくなると思います。
