display
display プロパティは要素の表示形式を指定します。代表的なものにブロック要素やインライン要素として表示する選択肢があります。
プロパティの詳細
- 値
- 値の詳細を参照
- 初期値
- inline
- 対象
- 全ての要素
- 継承
- しない
- CSS レベル
- CSS 2.1
値の詳細
- block
- ブロック要素として表示し、前後に改行が入る
- inline
- インライン要素として表示し、前後の要素が同じくインライン要素であれば同一行に表示
- inline-block
- ブロック要素のように幅や高さを表示できるがインライン要素のように配置される
- run-in
- 状況に応じてブロックまたはインラインで表示
- none
- 要素とその子孫を非表示にする。
- list-item
- リストとして表示
- table
- <table> のように表示
- table-cell
- <td> 要素のように表示
- flex
- ブロックレベルのフレックスコンテ
- inline-flex
- インラインレベルのフレックスコンテナ
- grid
- ブロックレベルのグリッドコンテナ
- inline-grid
- インラインレベルのグリッドコンテナ
- ruby
- <ruby> 要素のように表示
- ruby-base
- <rb> 要素のように表示
- ruby-text
- <rt> 要素のように表示
- ruby-base-container
- <rbc> 要素のように表示
- ruby-text-container
- <rtc> 要素のように表示
サンプル
例えばリンクを表す <a> 要素は標準ではインライン要素として表示されますが display: block; を指定することで前後に改行が入りサイズの指定などができるようになります。
a {
display: block;
}