[css]画像の下の隙間はなに？
Post on 16-Apr-2017
493 Views
Preview:
TRANSCRIPT
[CSS] 画像の下の隙間はなに？Gunma.web #21
2015.10.3 @honda0510
HTML:
HTML:
icon.png
HTML:
icon.pngCSS:
この隙間はなんでしょう？
隙間をなくすには
CSS:
隙間はなぜ消えたのか？
これを理解するにはインライン要素について知る必要がある。
ここで問題
ここで問題
vertical-alignプロパティの初期値は？
ここで問題
vertical-alignプロパティの初期値は？
正解: baseline
インライン要素について
インライン要素
①
①font-size分の高さの領域
インライン要素
①②
①font-size分の高さの領域
②line-height分の高さの領域
インライン要素
①② xA①font-size分の高さの領域
②line-height分の高さの領域
インライン要素
xA baseline
middle
vertical-align
画像にあてはめて考えると…
インライン要素
baseline
インライン要素
baseline
baselineを基準に配置される
インライン要素
baseline
baselineを基準に配置される
インライン要素
baseline
隙間の正体
インライン要素
baseline
上にはみ出した部分は広がる
インライン要素
baseline
vertical-alignをmiddleにすると…
インライン要素
middle
インライン要素
middle
隙間ができない
話の元
https://html5experts.jp/takazudo/13339/
top related