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は反映されます。

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

関連の記事

CSS display 要素(ボックス)の表示方法を指定する

△上に戻る