CSS インライン要素とブロック要素の違い

CSSのインライン要素とブロック要素の違いです。

サンプル	インライン要素
	ブロック要素
	インライン要素＋ブロック要素

インライン要素

インライン要素を続けて記述した場合、画面上は横に並びます。
主なタグは、文章内で使用されるspanです。
widthプロパティとheightプロパティで幅と高さを指定できません。
marginは、左右のみ効きます。

インライン要素のサンプルです。

<style>
    #box1 span{
		height: 50px;
        margin:20px 20px 20px 20px;
	}
    #box1 {background-color: #F5DEB3;}
</style>
<div id="box1">
    <span>abc</span>
    <span>abc</span>
    <span>abc</span>
</div>

8～10行目は、インライン要素のspanタグが続いています。
画面に表示すると横に並びます。
3行目にheightがありますが、インライン要素には効きません。
4行目のmarginは、左右のみ効きます。

以下は実行結果のイメージです。

ブロック要素

ブロック要素を続けて記述した場合、画面上は縦に並びます。
主なタグは、divやpです。
widthプロパティとheightプロパティで幅と高さを指定できます。
marginは、上下左右効きます。

ブロック要素のサンプルです。

<style>
    #box1 div{
        width:100px;
		height: 50px;
        margin:20px 20px 20px 20px;
        background-color: #F5DEB3;
	}
</style>
<div id="box1">
    <div>abc</div>
    <div>abc</div>
    <div>abc</div>
</div>

10～12行目は、ブロック要素のdivタグが続いています。
画面に表示すると縦に並びます。
3,4行目にwidthとheightがあり反映されます。
5行目のmarginは、上下左右効きます。

以下は実行結果のイメージです。

インライン要素＋ブロック要素

displayプロパティにinline-blockを指定するとinlineと同じように画面上は横に並びかつ
widthプロパティとheightプロパティで幅と高さを指定できます。
marginも上下左右効きます。
主なタグは、imgです。
便利なのでよく使われるテクニックです。

インライン要素＋ブロック要素のサンプルです。

<style>
    #box1 div{
        display:inline-block;
        width:100px;
		height: 50px;
        margin:10px 10px 10px 10px;
        background-color: #F5DEB3;
	}
</style>
<div id="box1">
    <div>abc</div>
    <div>abc</div>
    <div>abc</div>
</div>

3行目はdisplayにinline-blockを指定しています。
10～12行目は、ブロック要素のdivタグが続いていますが
inline-blockの指定があるので横に並びます。
widthとheightとmarginは反映されます。

以下は実行結果のイメージです。