ブロックレベル要素とインライン要素におけるプロパティの差
ブロックレベル要素とインライン要素の比較
| ブロックレベル要素 | インライン要素 | |
|---|---|---|
| 高さ(height) | 指定可 | 指定不可 |
| 幅(width) | 指定可 | 指定不可 |
| 左右のマージン(margin) | 要素の左右に存在 | 最初の文字の左側と、最後の文字の右側に存在 |
| 左右のパディング(padding) | 要素の左右に存在 | 最初の文字の左側と、最後の文字の右側に存在 |
| 左右のボーダー(border) | 要素の左右に存在 | 最初の文字の左側と、最後の文字の右側に存在 |
| 上下のマージン(margin) | 要素の上下に存在 | 無視され、レイアウトに影響は無い |
| 上下のパディング(padding) | 要素の上下に存在 | 全ての行に存在し、ボーダーの位置に影響が出る |
| 上下のボーダー(border) | 要素の上下に存在 | 各行に存在するが、他の行に重なる場合がある |
これらはCSS2でdisplayプロパティを使えば変更可能。
display: inline;, display: block;とすれば、 それぞれインライン要素、ブロックレベル要素として表示され、 マージンの適用方法等もdisplayプロパティに合わせられる。
