ブロックレベル要素
単にブロック要素とも。
ブロック = 塊 として扱われる。
特徴
- 改行を伴う
- 縦に要素が並ぶ
- 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 タグがすべて横並びに表示されるようになる。
まとめ
|要素|改行|サイズ指定|余白指定|
| :-- | :-- | :-- | :-- | :-- |
|ブロック|する|できる|できる|
|インライン|しない|できない|左右のみできる|
|インラインブロック|しない|できる|できる|