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）が指定できる