画像と文字間調整 　別な方法

　筆者は、長い間、HOTALLというソフトを使っていたため画像と文字間隔は、画像にmarginを設定する方法で実施してきました。ところが、スタイルシートを使用すると line-height で調整することができます。以下これについて説明します。

1. 画像にマイナスmarginを設定しないとき、画像と文字間は、約10pxです。これを以下に説明します。
   bodyに line-height:1.5 を指定し、文字は 16px ですから、行間は、計算上 16/2 = 8px 空きます。画像は文字と同じ扱いですから、画像と文字間も 8px 空きます。見たところは、約10pxですが、これは、文字の上下には、余白があるからです。
2. 上のことから line-height を変えれば、画像と文字間は、変わることがわかります。
3. line-height は、<li> と </li> の中だけ指定すればよいので、li に下記のように指定します。
   li {
   　display : inline-block;
   　width : 245px;
   　text-align : center;
   　line-height : 1.2;　（←追加）
   }
4. line-heightを 1.5、1.3、1.2 にした場合の状況を下に示します。
5. 画像と文字間の空きは、好みの問題です。line-height は、1.2 か 1.3でよいと思います。

   (2021/04/09)