インライン要素とブロック要素について①

HTML,CSSを勉強していると必ずしもWebサイトを構築するうえで頻繁に使うようになってくるため、自身の復習も兼ねて上記についてゆっくり解説していこうと思います。

|дﾟ)＜分けて更新していきます

【はじめに】

インライン要素やブロック要素を理解していくために、まず"display"というワードについて解説していこうと思います。

displayとは？

CSSのプロパティの１つで、ざっくりと説明すると要素の表示形式を決めるものです。

※要素の表示のされ方や高さ・幅の設定など

このdisplayに対して”block”や”inline”といった値が使われます。

---例---

body {

   display: inline;

}

body…セレクタ

display...プロパティ

inline...値

【値について】

このdisplayに対する値としては次の種類があります
(他にもdisplayの値はありますが、まず覚えておきたい４つ)

①block

⇒　p、div、ul、h1~h6、table、formなどのタグ(初期値)

②inline

⇒a、span、img、labelなどのタグ

③inline-block

④none

上記のとおり、値とはHTMLでの構成で使われている「<p>(block)」や「<a>(inline)」

のタグだと思ってください。タグごとにがdisplayプロパティの初期値が決まっていて

ほとんどのタグが”block”や”inline”が初期値となっています。

インライン要素とブロック要素について②　へ