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	リストの見た目になります。
値を継承しない

displayのflexを指定する場合は以下を参照願います。
CSS displayのflexで要素を横に並べるサンプル
以下はMDNのdisplayプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/display

横に並べる(inline)

<style>
	#box2 div{
		display:inline;
		height: 50px;
		background-color: #F5DEB3;
	}
</style>
<div id="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 id="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 id="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 id="box5">
    <p>リスト化
        <span>abc</span>
        <span>abc</span>
        <span>abc</span>
    </p>
  </div>

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

以下は、実行結果です。