HTML
CSS
マークアップ

画像や inline 要素の周辺に出来る余白・アキ

More than 1 year has passed since last update.

掲題の問題で悩んではる人が居たので、軽くレクチャーついでに知見メモ。


左右に出来る余白・アキ

an apple ← n と a の間に空白が空きますよね。

inline 要素も inline-block 要素も同様、

<img> <img> の様に並べれば左右に並べると空白が空きます。

下記の様に、改行して空白なしに次の要素でも空かないっぽいですが、

綺麗にインデントした場合を考えるとあまり現実的でない気もします。

<img>

<img>

トリッキーな解決策に「コメントタグを使う」ないし

閉じ括弧だけ次の要素に繋げるというのもできなくは無いです。

       <img><!--

--><img><!--
--><img><!--
--><img>

     <img

><img
><img
><img>

それでも HTML を綺麗に書きたい場合は、各要素を float させて、

親要素に clearfix を適用するのがベターかなと思います。

/* CSS for Clearfix */

.parent-element::after {
content: "";
display: table;
clear: both;
}


下に出来る余白・アキ

テキストのベースラインが原因です。

シンプルに vertical-align: bottom; を適用しましょう。

他に top、middle もありますがデフォルト値の baseline に

挙動が一番近い bottom が個人的には良いかなと思います。

昔は縦幅の小さい装飾画像などを入れる際に、

font-size や line-height なんかが悪さをする事がありましたが、

今は基本、背景画像にするかと思うので、大体これで解決すると思います。

また、こちらも各要素を float + clearfix でも誤魔化せますが、

レイアウト崩れの元になるので、あまり不用意に float を乱用するのはお勧めしません。


参考記事