HTML・CSSのblock,Inline,Inline-blockの違いについてまとめます
○前提
HTML・CSSの要素の表示形式には種類があり下記３種がよく使用される
・Inline要素
・block要素
・Inline-block要素
これらは要素の幅や高さの調節に用いられる
○各表示形式の特徴
・Inline要素とは
→block要素の内容として用いられる要素
(例)
aタグ,imgタグ spanタグなど
(特徴)
* 要素の幅は中身と同じ大きさになる
* 要素同士が横に並ぶ
* 幅（width）と高さ（height）が指定できない
* 余白（padding・margin）が指定できない
* 要素の配置を返すことができる
・block要素とは
→コンテンツをまとめるために用いられる要素
(例)
div,p,h1など
(特徴)
* 要素の幅はブラウザ幅いっぱいになる
* 要素同士が縦に並ぶ
* 幅（width）と高さ（height）が指定できる
* 余白（padding・margin）が指定できる
* 要素の配置は変えられない。
・Inline-block要素
→block要素とInline要素の中間の要素で、
inline要素でwidth,heightを指定したり、
Block要素で横方向に並べたい際にこのinline-block要素を使用する
(特徴)
* 要素の幅は中身と同じ大きさになる
* 要素同士が横に並ぶ
* 幅（width）と高さ（height）が指定できる
* 余白（padding・margin）が指定できる