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

CSSのdisplayプロパティで、要素(ボックス)の表示方法を指定するサンプルです。

確認環境
・Google Chrome

目次

仕様 displayプロパティの仕様
サンプル 横に並べる(inline)
  縦に並べる(block)
  横に並べる+幅と高さを指定(inline-block)
  リストの見た目(list-item)

displayプロパティの仕様

display : 値

displayプロパティは、要素(ボックス)の表示方法を指定します。

説明
none 要素(ボックス)を非表示にします。存在しないような見え方になります。
inline インライン要素ボックスを生成します。
前後に改行は入らないので横に並びます。(初期値)
注意点としては、widthプロパティとheightプロパティで幅と高さを指定できません。
block ブロック要素ボックスを生成します。
前後に改行が入るのでボックスは、縦に並びます。
widthプロパティとheightプロパティで幅と高さを指定できます。
inline-block 上記のinlineとblockがひとつになっています。
ブロック要素ボックスを生成しますが、前後に改行しないのでinlineと同じように横に並びます。
またinlineと違って、widthプロパティとheightプロパティで幅と高さを指定できます。
list-item リストの見た目になります。
値を継承しない

横に並べる(inline)

<style>
  .box2 div {
    display: inline;
    height: 50px;
    background-color: #f5deb3;
  }
</style>
<div class="box2">
  <div>inline1</div>
  <div>inline2</div>
  <div>inline3</div>
</div>

3行目はdisplayにinlineを指定しています。
9,10,11行目のdivはブロック要素のタグですがdisplay:inlineでインライン要素扱いになります。
そのため横に並び4行目のheightは効きません。

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

 

縦に並べる(block)

<style>
  .box3 span {
    display: block;
    height: 50px;
    background-color: #add8e6;
  }
  span {width: 200px;margin-bottom: 10px;}
</style>
<div class="box3">
  <span>block1</span>
  <span>block2</span>
  <span>block3</span>
</div>

3行目はdisplayにblockを指定しています。
10,11,12行目のspanはインライン要素のタグですがdisplay:blockでブロック要素扱いになります。
そのため縦に並び4行目のheightが反映されます。

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

 

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

<style>
  .box4 div {
    display: inline-block;
    height: 50px;
    background-color: #f5deb3;
  }
</style>
<div class="box4">
  <div>inline-block1</div>
  <div>inline-block2</div>
  <div>inline-block3</div>
</div>

3行目はdisplayにinline-blockを指定しています。
inlineのように横に並んで表示され、かつwidthとheightの指定が効きます。

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

 

リストの見た目(list-item)

<style>
  .box5 p span {
    display: list-item;
    margin-left: 15px;
  }
</style>
<div class="box5">
  <p>リスト化
    <span>abc</span>
    <span>abc</span>
    <span>abc</span>
  </p>
</div>

list-itemは、マーカー用のボックスが表示されます。margin-leftで表示を調整します。

以下は、実行結果です。

関連の記事

CSS padding 要素の内側の余白を指定する
CSS margin 要素の外側の余白を指定する
CSS width 幅を指定するサンプル
CSS 回り込みと解除のサンプル(floatとclear)
CSS z-index 要素の重なる順番を指定する

△上に戻る