inline-blockについて
◉ インライン−ブロック要素とは?
インライン要素とブロック要素の両方の特徴を併せ持った要素のこと。
● インライン要素の特徴
- 要素の幅は中身と同じ大きさになる
- 要素同士が横に並ぶ
- 幅(width)と高さ(height)が指定できない
- 余白(padding・margin)が指定できない
● ブロック要素の特徴
- 要素の幅はブラウザ幅いっぱいになる
- 要素同士が縦に並ぶ
- 幅(width)と高さ(height)が指定できる
- 余白(padding・margin)が指定できる
● インラインブロック要素の特徴
インライン要素のように横並びに配置でき、
ブロック要素のように幅や高さ・余白の指定ができる。
「幅や高さが変更できるインライン要素」といったイメージ。
「幅や高さが変更できるインライン要素」といったイメージ。
◉ インライン-ブロック要素の特性
⚫︎ 要素の幅は中身と同じ大きさになる。
⚫︎ 要素同士が横に並ぶ。
⚫︎ 幅と高さが指定できる。
⚫︎ 余白が指定できる。
⚫︎ text-align が使用できる。
⚫︎ varticla-align が使用できる。
⚫︎ 横並びにした要素に隙間ができる。
◉ display:inline-block
「 display:inline-block; 」と設定すると、インライン要素の特徴を持ちながら、
ブロックレベル要素のように width や height を指定できるようになり、
padding や margin が親要素のボックスからはみ出さなくなる。
また、上下マージンも指定できるようになり、よく利用される。