CSS 要素のボックスの種類を指定するサンプル(display) |

CSSの要素のボックスの種類を指定するサンプルです。
displayプロパティを使用します。

display

display : 値

値	説明
none	要素を非表示にします。要素が存在しないような見え方になります。
inline	インライン要素ボックスを生成します。(初期値) 横に並びます。 widthプロパティとheightプロパティで幅と高さを指定できません。
block	ブロック要素ボックスを生成します。縦に並びます。 widthプロパティとheightプロパティで幅と高さを指定できます。
inline-block	ブロック要素ボックスを生成します。 inlineのように横に並びます。 widthプロパティとheightプロパティで幅と高さを指定できます。
list-item	ブロック要素ボックスとリスト項目のマーカー用のボックスを生成します。
値を継承しない

要素のボックスの種類を指定します。
以下はMDNのdisplayプロパティのリンクです。
displayプロパティの他の値については以下を参照願います。
https://developer.mozilla.org/ja/docs/Web/CSS/display

コード

サンプルのコードです。
displayプロパティの値にnone、inline、block、inline-block、list-itemを指定しています。

<style>
#box1{
	display:none;
}
#box2 ul li{
	display:inline;
}
#box3 ul li{
	display:block;
}
#box4 ul li{
	display:inline-block;
}
#box5 ul li{
	display:list-item;
}
#d1 div ul li{border:1px solid #000;width:200px;height:40px;}
</style>
<body >
<div id="d1">
<div id="box1">none</div>
<div id="box2">
	<ul>
		<li>inline1</li>
		<li>inline2</li>
		<li>inline3</li>
	</ul>
</div>
<div id="box3">
	<ul>
		<li>block</li>
		<li>block</li>
		<li>block</li>
	</ul>
</div>
<div id="box4">
	<ul>
		<li>inline-block</li>
		<li>inline-block</li>
		<li>inline-block</li>
	</ul>
</div>
<div id="box5">
	<ul>
		<li>list-item</li>
		<li>list-item</li>
		<li>list-item</li>
	</ul>
</div>
</div>
</body>

サンプル

上記コードのサンプルです。
noneは、コード上に記述していますが画面には表示されていません。
inlineは、横に並んでいます。またwidthとheightを指定していますが効いていません。
blockは、縦に並んでいます。widthとheightの指定が効いています。
inline-blockは、inlineのように横に並んで表示され、かつwidthとheightの指定が効いています。
list-itemは、マーカー用のボックスが表示されています。

none

inline1
inline2
inline3

block
block
block

inline-block
inline-block
inline-block

list-item
list-item
list-item