CSSの設定では display をよく使うけれど、それぞれの要素の特徴は、ぼんやり把握しているだけだったので、ちょっと整理してみました。
特徴 | インライン要素 | ブロック要素 | インラインブロック要素 |
要素の幅 | 中身と同じ大きさになる | ブラウザ幅いっぱいになる | 中身と同じ大きさになる |
並び方 | 要素同士が横に並ぶ | 要素同士が縦に並ぶ | 要素同士が横に並ぶ |
幅(width)と 高さ(height) | 指定できない | 指定できる | 指定できる |
余白(paddingと margin) | 指定できない | 指定できる | 指定できる |
違いがよくわかっていなかった「inline-block」もこうしてまとめてみると納得。
要するに、インライン要素のように横に並び、ブロック要素のように幅や高さ、余白の指定ができる要素。
CSSのプロパティ設定でもう迷わないゾ!!