ボックスの種類と指定方法、それぞれの違いについて（ブロック・インライン要素）

htmlのボックスの種類とそれぞれの違い、指定の方法についての紹介です。
htmlタグでマークアップした部分（htmlタグを入力した部分）には、ボックスが構成されます。例えばインラインボックスやブロックボックスという言葉を聞いた事がないですか？
以前にも紹介しましたし、一度は聞いた事あると思いますが、 htmlタグを入力すると目には見えないですが上記のようなボックスが勝手に構成されます。どのボックスを構成するかはデフォルトスタイルシートの「displayプロパティ」の値（inlineやblockなど）によって決まり、表示の仕方も変わります。
といっても分かりづらいのでまずは下の例を見て下さい。

例えば上記の場合だと、ページタイトルをh1タグ、文章をpタグ、リンクをaタグでマークアップ（記述）しています。
ブロック要素であるh1タグとpタグの displayプロパティの初期値は「block」です。
なのでブロックボックスが構成されるわけです。
逆にインライン要素である「aタグ」の displayプロパティの初期値は「inline」です。なのでinlineボックスを構成します。
で、ブロックボックスとインラインボックスの違いなんですが、まずは下の画像を見て下さい。

上の画像はh1、p、aタグのそれぞれに背景を付けた例です。背景の付いてる部分がそれぞれのボックスの表示領域となってます。
見るとわかると思うのですが、ブロックボックスは横幅いっぱいに表示され、前後に改行が入っています。
逆にインラインボックス（aタグの部分）は中身に合わせた横幅となり、ボックスの前後に改行も入りません。
htmlタグごとにどのボックスが構成されるかは、指針が示されていて、各ブラウザはこの指針に沿って表示されます。
簡単にいうと、h1～h6、div、p、table、ol、dl、ulタグがブロックボックス。 a、span、strong、b、img、q、などがインラインボックスとなります。
よく使うタグだけ、例として挙げました。
実際入力してみると、前後に改行が入らなかったり、表示領域の違いなどで、それぞれ見分ける事ができるようになると思います。
ちなみにdisplayプロパティの値を変える事で構成されるボックスを変更する事も可能です。
例えば、aタグはインラインボックスを構成しますが、 diplay:block;と記述するとブロックボックスを構成するようになります。
ではそれぞれのボックスの種類や違い、変更の仕方などを書いていきますね。

ブロックボックス（block）

ブロックボックスを構成するためには、 displayプロパティの値を「block」にします。
例えば「aタグ」にブロックボックスを構成するように指定すると、上記の画像のようにボックスが横幅いっぱいに表示され、前後に改行を入った表示となります。

ちなみにグローバルメニューやサイドバーのリンクなどで、文字以外の所にカーソルを当ててもクリックできるようになっているモノを見たことがあると思います。
そういう場合は、大体が「aタグ」にdisplay:block;を設定して、 paddingなどで上下の余白を調整している場合はほとんどです。

ブロックボックスの指定（css）
1
example {display:block;}

インラインボックス（inline）

インラインボックスを構成する場合は、 displayプロパティの値を「inline」にします。
例えば、h1、p、aタグにインラインボックスを構成するように指定すると、それぞれのボックスが中身に合わせた横幅で表示されるようになります。
ちなみにインラインの場合は、前後に改行が入りません。
なので1行に繋がった状態で表示されます。
あとインラインボックスではwidth（横幅）、height（高さ）プロパティによる横幅と高さの設定が無効となります。
まあ、無効というより設定しても、反映されません。
横幅と高さを設定したい場合は、インラインボックスと同じように扱われる「インラインブロックボックス（inline-block）」を使いましょう。

インラインボックスの指定（css）
.example {display: inline;}

インラインブロックの指定（css）
.example {display: inline-block;}

リストボックス（list-item）

リストボックスは基本的にはブロックボックスと同じです。
違いは行の先頭にリストマーク「・」が導入され、リスト形式で表示がされるようになります。

上記の画像はh1、p、aタグのdisplayプロパティの値を「list-item」にした時の例です。
行の先頭にリストマークが表示され、リストボックスが構成されているのがわかると思います。
リストボックスの指定（css）
.example {display: list-item;}

ボックスの形の変化

何となく違いもわかったと思いますが、一応ブロックボックスとインラインボックスの形の違いも載せておきますね。

上の画像はテキストをpタグで囲み、 pタグの背景を青にしたものです。
例えばpタグのdisplayプロパティの値を「block」にした場合（ｐは初期値でblock）、画像のようにpタグの中身全てを含むブロックボックスが構成されます。
ですが「inline」にした場合は、中身のテキストに合わせて行ごとのインラインボックスが構成されます。

それぞれのボックスの違いを紹介しましたが、いかがでしたでしょうか？
何となくわかって頂ければ幸いです。

中々説明が難しい部分ではあったんですが、
なんとなーくわかってれば大丈夫です(^^♪
リストボックスはほとんど指定する事がないと思いますが、ブロックとインラインは100%使うので違いだけは覚えておくと後々楽ですよ(^^)/