display
属性値
| サポート ※1 |
値 |
説明 |
| CSS1 |
none |
要素を表示しない |
| inline |
インライン要素として扱われるようにする |
| block |
ブロック要素として扱われるようにする |
| list-item |
|
| CSS2.1 |
inline-block |
インライン要素のように流し込みが行われる、ブロック要素として扱われるようにする |
| table |
table要素として扱われるようにする |
| CSS3 |
flex |
ブロック要素のように振る舞い、flexboxモデルでレイアウトする |
| inline-flex |
インライン要素のように振る舞い、flexboxモデルでレイアウトする |
※1 Browser compatibility - display - CSS | MDN
| inline |
<div style="display: inline">A</div>
<div style="display: inline">B</div>
|
A
B
|
| block |
<span style="display: block">A</span>
<span style="display: block">B</span>
|
AB |
| inline |
<span style="width: 50px; height: 50px;
display: inline">A</span>
|
A |
| block |
<span style="width: 50px; height: 50px;
display: block">A</span>
|
A |
| inline-block |
<span style="width: 50px; height: 50px;
display: inline-block">A</span>
|
A |
visibilityとの相違
display:noneと近いスタイルに、visibility:hiddenがあります。これらの違いは、その要素の領域を確保するか否かです。
A<span style="display:none">B</span>C
(表示されない要素の領域が、確保されていない) |
ABC |
A<span style="visibility:hidden">B</span>C
(表示されない要素の領域も、確保されている) |
ABC |