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

CSS

HTML5ではブロックレベル要素とインライン要素という分類は廃止になりました。 しかしCSSでのdisplayプロパティの状態としては残っています。
つまり文書構造としての役割はなくなりましたが、装飾としての役割は残っている訳です。

各要素にはdisplayプロパティの初期値が設定されており、CSSのdisplayプロパティで変更が可能です。
代表的なのはblockとinlineですが、他にもblock-inlineやtableなどの値もあります。

isplay:block; /*ブロック*/
display:inline; /*インライン*/

これらの違いについて確認しておきましょう。

ブロックレベル要素

ブロックレベル要素は一つのブロックとして扱われ、縦に並ぶのが特徴です。

isplay:block;

特徴

代表的な要素

p要素、h1要素、div要素など

インライン要素

インライン要素はブロックレベル要素に内包される要素で、横に並ぶのが特徴です。

isplay:inline;

特徴

代表的な要素

a要素、span要素、br要素など

インラインブロック要素

displayの値でよく使うのが、blockとinlineの混合型であるinline-blockです。
高さを指定できるinline要素といった体で、グローバルメニューなどによく使われます。

isplay:inline-block;

特徴

eyecatch

CSSでアニメーションを設定する

CSSの記事

eyecatch

ドロップシャドウでテキストやボックスに影を付ける

eyecatch

ブラウザの先行・拡張機能を実装する機能「ベンダープレフィックス」

eyecatch

CSSとは

eyecatch

idとclassの使い分け

eyecatch

要素セレクタで条件下の要素のスタイルを変える方法

eyecatch

セレクタとプロパティの基本

CSSの記事一覧HOME