ブロックレベル要素
単にブロック要素とも。
ブロック = 塊 として扱われる。
特徴
- 改行を伴う
- 縦に要素が並ぶ
- width , heigth でサイズが指定できる
- margin , padding で余白が指定できる
| 代表的なタグ |
|---|
<p> |
<h1>-<h6> |
<div> |
インライン要素
ブロックレベル要素の内容として用いられる。
特徴
- 改行を伴わない
- 横に要素が並ぶ
- width , heigth でサイズが指定できない
- margin , padding で左右に対してのみ余白が指定できる
| 代表的なタグ |
|---|
<a> |
<input> |
<span> |
インラインブロック要素
2つの特性を併せ持つインラインブロック要素。
ブロック = 塊 として扱われるが、改行を伴わない。
主にブロック要素を横並びにしたいときに用いられる。
特徴
- 改行を伴わない
- 横に要素が並ぶ
- width , heigth でサイズが指定できる
- margin , padding で余白が指定できる
使用方法
CSS の display プロパティで inline-block を指定することでインラインブロック要素になる。
div {
display: inline-block;
}
この場合、div タグがすべて横並びに表示されるようになる。
まとめ
| 要素 | 改行 | サイズ指定 | 余白指定 |
|---|---|---|---|
| ブロック | する | できる | できる |
| インライン | しない | できない | 左右のみできる |
| インラインブロック | しない | できる | できる |