HTMLの画像のimgや動画のiframeの下の隙間を消して文章やリンクと整えるCSS

サイトで画像や動画に文章を続けると隙間が多めに付いたり、囲うリンクが大き過ぎて画像や動画の下が余ったりしてデザインが崩れることがある。枠線や余白を消しても現れて悩まされるけれども対処法が分かったので、どうすれば余分な隙間を消し去って画像や動画のデザインを次の文章やリンクの大きさと整えられるかを纏める。画像や動画が周りの要素とずれる原因アルファベットの「g j p q y」のベースラインの下の部分に赤い線が薄く引かれている

アルファベットの「g j p q y」のベースラインの下の部分に赤い線が薄く引かれている

サイトの画像や動画が周りの要素とずれる原因はHTMLの画像を表示するimgタグや動画を表示するiframeタグの扱いが影響している。imgとiframeは改行なしの要素で、縦位置がベースラインとなり、次の列の要素との間に僅かな空間が取られる。日本語にはないけれども例えば英語では「g」と「j」と「p」と「q」と「y」の文字が本体よりも下に伸びるところがベースラインの下になる。HTMLでそうしたベースラインの下が画像のimgタグや動画のiframeの下の隙間に相当する。画像や動画の下の隙間を消す方法HTMLのimgやiframeに調整用のCSSを指定する。

displayを使う

vertical-alignを使う

画像や動画の下に隙間ができるのはHTMLで改行なしの要素として扱われてベースラインに置かれることが原因だからCSSのdisplayのblockなどで、改行ありの要素に変えるかvertical-alignのtopなどで縦位置をベースラインから外すことで、一般的に調整することができる。display:blockで画像や動画の下の隙間を消す公園に咲いた赤い皐月

imgタグの画像と次の文章の間には最小限の隙間しかない。CSS.content {display:block}※imgタグやiframeタグに「content」のクラスを付ける。画像や動画が改行ありの要素として扱われると縦位置がベースラインから外れて下の隙間がなくなる。次の文章が下に来た場合、改行なしの状態ならばぴったり付くように表示される。改行ありの状態でも上の余白（margin-top）がなければ同じ結果となる。囲うリンクも画像や動画がベースラインを持たなくなるためにぴったり合わさるようになる。displayの値は改行ありのものならば大丈夫で、block以外にflexやgridやflow-rootやlist-itemやtableなども使える。リンクの場合、リンクのaタグにdisplayのflexやgridをかけると縦横のスペースが画像の大きさと合うようになるから画像のdisplayを変える必要はなくなる。vertical-align:topで画像や動画の下の隙間を消す

結城永人 - お元気ですか｜結城永人

iframeタグの動画と次の文章の間には最小限の隙間しかない。CSS.content {vertical-align:top}※imgタグやiframeタグに「content」のクラスを付ける。画像や動画の縦位置がベースラインから外れるとその下の空間が取られる必要がなくなって隙間が消える。次の文章が下に来た場合、改行なしの状態ならばぴったり付くように表示される。改行ありの状態でも上の余白（margin-top）がなければ同じ結果となる。囲うリンクも画像や動画がベースラインを持たなくなるためにぴったり合わさるようになる。vertical-alignの値はベースラインから外れるものならば大丈夫で、top以外にmiddleやbottomも使える。画像や動画の枠線や余白を消しても現れる余分な隙間はHTMLで改行なしの要素として扱われるベースラインの縦位置から来るかぎり、CSSのdisplayかvertical-alignを使って消すのが最も速やかな方法だ。どちらのマークアップを使うかは少なくとも他のCSSに支障が出ないように注意して選ぶべきだろう。

コメント