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

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

目次 displayのinline/block/inline-blockとは
横に並べる(inline) / 縦に並べる(block)
横に並べる+幅と高さを指定(inline-block)
リストの見た目(list-item)

displayのinline/block/inline-blockとは

書き方 display : 値
none
要素(ボックス)を非表示にします。存在しないような見え方になります。
横に並べる(inline)
インライン要素ボックスを生成します。
前後に改行は入らないので横に並びます。(初期値)
注意点としては、widthプロパティとheightプロパティで幅と高さを指定できません。
縦に並べる(block)
ブロック要素ボックスを生成します。
前後に改行が入るのでボックスは、縦に並びます。
widthプロパティとheightプロパティで幅と高さを指定できます。
>横に並べる+幅と高さを指定(inline-block)
ブロック要素ボックスを生成しますが、前後に改行しないのでinlineと同じように横に並びます。
またinlineと違って、widthプロパティとheightプロパティで幅と高さを指定できます。
リストの見た目(list-item)
リストの見た目になります。
displayのflexを指定する場合は以下を参照願います。
CSS display flexで要素を横に並べるサンプル
初期値 inline
継承 なし
参考(MDN) https://developer.mozilla.org/ja/docs/Web/CSS/display

横に並べる(inline)

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

7,8,9行目のdivはブロック要素のタグですがdisplay:inlineでインライン要素扱いで横に並びます。
インライン要素のため5行目にheightを追加しても効きません。

 

縦に並べる(block)

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

10,11,12行目のspanはインライン要素のタグですがdisplay:blockでブロック要素扱いになります。
そのため縦に並び4行目のheightが反映されます。(インライン要素ではheightは効きません。)

 

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

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

inline-blockは、inlineのように横に並べて表示し、かつwidthとheightの指定が効きます。

 

3つめの要素にinline-blockがない場合

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

10行目は、inline-blockの指定がありません。その場合以下のようになります。

 

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

<style>
  span {
    display: list-item;
    margin-left: 15px;
  }
</style>
<p>リスト化
  <span>abc</span>
  <span>abc</span>
  <span>abc</span>
</p>

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

関連の記事

CSS 回り込みと解除のサンプル(floatとclear)
CSS z-index 要素の重なる順番を指定する

△上に戻る