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

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

左右に出来る余白・アキ

an apple は当然ながら an と apple の間に空白が空きます。

inline 要素や inline-block 要素なども同様、
<img> <img> の様に左右に並べると空白が空きます。

下記の様に、空白なしで改行・次の要素が来る場合は空かないようですが、
綺麗にインデントした場合を考えると非現実的なので、回避策を考えます。

<img>
<img>

<!-- インデントが入ると開く -->
<div>
  <img>
  <img>
</div>

解決策 1: タグの連結

トリッキーな解決策ですが、次の要素に繋げる事で解消できなくは無いです。
コメントタグを使う、ないし閉じ括弧だけ改行するなどで。

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

     <img
    ><img
    ><img
    ><img>

解決策 2: float × clearfix

それでも HTML を綺麗に書きたい場合は、各要素を float させて、
親要素に clearfix を適用するのがベターかなと思います。

.parent-element {
    /* Clearfix */
    &::after {
      display: table;
      clear: both;
      content: "";
    }

    .target-element { float: left }
}

解決策 3: flex 要素で囲う

display: flex を適用した要素で囲います。

<div style="display: flex">
  <img>
  <img>
</div>

※画像を flex の要素で囲うと Mobile の Safari などで想定外の挙動をする事が有ったので注意。

下に出来る余白・アキ

テキストのベースラインが原因です。
vertical-align のデフォルト値が baseline になっているので、
それを書き換えれば解消できます。
vertical-align: baseline

解決策 1: `vertical-align`

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

他に top、middle もありますがデフォルト値の baseline に
挙動が一番近い bottom が個人的には良いかなと思います。
(ファイルサイズ・パフォーマンス優先で top 推奨)

昔は縦幅の小さい装飾画像などを入れる際に、
font-size や line-height なんかが悪さをする事がありましたが、
今は背景画像にするケースが多いので、大体これで解決すると思います。
(解消しなければ font-size や line-height に小さい値を入れる。)

その他の解決策

こちらも float × clearfix や flex 要素で囲っても解消できますが、
想定外の挙動をしたり、レイアウトを制御しにくくなったりレイアウト崩れの元にもなるので、いずれも乱用はお勧めしません。

余談

Tailwind CSS は img 要素に display: block と vertical-align: middle の両方が設定されています。
個人的には block は元の挙動と大きく異なるため、Tailwind CSS の導入・排除する際に壊れやすいポイントで嫌いな指定です。

元の挙動：左右に並ぶ → 導入後の挙動：上下に並ぶ

ref: https://github.com/jensimmons/cssremedy/issues/14

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