スキップしてメイン コンテンツに移動

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

サイトで画像や動画に文章を続けると隙間が多めに付いたり、囲うリンクが大き過ぎて画像や動画の下が余ったりしてデザインが崩れることがある。枠線や余白を消しても現れて悩まされるけれども対処法が分かったので、どうすれば余分な隙間を消し去って画像や動画のデザインを次の文章やリンクの大きさと整えられるかを纏める。

画像や動画が周りの要素とずれる原因

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

サイトの画像や動画が周りの要素とずれる原因はHTMLの画像を表示するimgタグや動画を表示するiframeタグの扱いが影響している。

imgとiframeは改行なしの要素で、縦位置がベースラインとなり、次の列の要素との間に僅かな空間が取られる。

日本語にはないけれども例えば英語では「g」と「j」と「p」と「q」と「y」の文字が本体よりも下に伸びるところがベースラインの下になる。

HTMLでそうしたベースラインの下が画像のimgタグや動画のiframeの下の隙間に相当する。

画像や動画の下の隙間を消す方法

HTMLのimgやiframeに調整用のCSSを指定する。

画像や動画の下に隙間ができるのは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に支障が出ないように注意して選ぶべきだろう。

コメント

些細な日常の人気の投稿

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策

イメージ

偶に始まらなかったり、途中で止まったりもしていたPlayストアでのAndroidアプリのダウンロードは安定して来ていると思うし、喜ばしいかぎりの昨今だけれども速度自体はいつも同じではないから何だろうと訝られる。 余りに遅過ぎるわけではないし、お手上げとまでは行かないにせよ、非...

飽和脂肪酸の多いココナッツオイルの過剰摂取の危険性とその他の健康上の利点

イメージ

パンや菓子や揚げ物などに安く使用される マーガリンやショートニングなどのトランス脂肪酸が動脈硬化を引き起こすと世界的に避けられる 一方で、代わりに新しく使用される他の食用油によって必ずしも健康的な食生活が確保されるとはかぎらない状況も出て来てしまっているのが厄介なんだ。 脂...

早川愛の高校野球の夏の甲子園の大会歌の栄冠は君に輝くの独唱のソプラノの美声

イメージ

高校野球の夏の甲子園の 作新学院と今井達也の優勝の記事 を改善するために新しく引用できる動画はないかとYouTubeで探していたら2016年の地方予選の栃木大会だから当の作新学院と今井達也も参加して奇しくも予選の勝ち抜けと夏の甲子園での全国制覇への好影響を受けたかも知れなかった...