CSS ブロックレベル要素とインライン要素

nas2020/10/04

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

目次

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

ブロックレベル要素

  • ブロックレベル要素を続けて記述した場合、画面上は縦に並びます。
  • 主なタグとしてdiv,p,h1,h2,table,form等があります。
  • widthとheightで幅と高さを指定できます。
  • marginは、上下左右効きます。

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

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

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

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

 

インライン要素

  • インライン要素を続けて記述した場合、画面上は横に並びます。
  • 主なタグとしてspan,a,img,input等があります。
  • widthとheightで幅と高さを指定できません。(img,inputは可能)
  • marginは、左右のみ効きます。(img,inputは上下も可能)

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

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

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

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

 

インライン要素＋ブロックレベル要素

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

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

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

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

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

関連の記事

CSS display 横に並べ幅と高さを指定(inline-block)

△上に戻る