display とは
CSSのプロパティの1つで、要素の種類(ブロックレベル要素、インライン要素)を変更することができるプロパティのこと。
値には、変更したい要素の種類を設定します。
p {
display: flex; /* ブロック要素を横並び */
}
displayと組み合わせる値
| 値との組み合わせ | 効果 |
|---|---|
| display: block; | 指定された要素はブロックレベル要素として表示されます |
| display: inline; | 指定された要素はインライン要素として表示されます |
| display: inline-block; | 指定された要素はインライン要素とブロックレベル要素の特性を併せ持ちます |
| display: flex; | 指定された要素の子要素は横並びになる |
| display: none; | 指定された要素は非表示になる |
display: inline-block;について詳しく
インラインブロック要素の特徴
・要素の幅は中身と同じ大きさになる（インライン要素の特徴）
・要素同士が横に並ぶ（インライン要素の特徴）
・幅（width）と高さ（height）が指定できる（ブロックレベル要素の特徴）
・余白（padding・margin）が指定できる（ブロックレベル要素の特徴）