block要素とinline要素の考察


See the Pen used block-inline by nakanishi (@nakanishi) on CodePen.

block要素とinline要素の性質は「経験的」にはわかることが断片的にはあるものの、理論的にはわからない、ので実験する

block要素とinline要素はCSSにおいて重要な性質のうちの1つであるが、私は「経験的」にはわかることが断片的にはあるものの、理論的にはよくわかっていない。リファレンスを読んでも今一歩わからない…

そこで実際に全パターンを書いてみることで理解を深めたい。

ブロック要素は幅を決めなければ、親要素と同じになる

まず基本的なことだが、ブロック要素は幅を指定しなければ、親要素と同じ幅になる。対して、インライン要素は、コンテンツによって幅が自動的に決まる。

インライン要素に幅を指定しても意味がない

インライン要素はコンテンツによって幅が自動的に決定されるため、幅を指定しても無効である。

要素を中心に置きたくても、(3)、(4)のようにインライン要素には幅指定ができないので、margin: autoを使っても、中心にはこない

(1)と比較するとわかるが、インライン要素のようにコンテンツによって幅が自動に決まるものにmargin: autoを与えても、中心には来ない。

これは幅が明示的ではない要素はmargin: autoが機能しないということだろうか。

(5)インラインブロック要素の幅は、何も指定しなければコンテンツによって決まるが、インライン要素と違って幅を指定することもできる。ただしインライン要素と同じく、改行されない。

インラインブロック要素は、インライン要素と同じく、改行されずに右側に次のコンテンツがくる。しかし、インライン要素と異なり、幅を与えることができる。

参考

その他インライン要素とブロック要素の癖について情報がまとめられている。

CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ

課題:冒頭の例のような場合、上下も中央に配置するにはどうすればいいか

vertical-align: middle;で良さそうだが、上手くいかない。手段を見つけたい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です