2/3 画像の下に謎の隙間ができるのを防ぐ方法 [ホームページ作成] All About画像の下に謎の隙間ができるのを防ぐ方法(2ページ目)背景色を付けたボックス内に画像を配置した際などに、画像の下に余計な空白が見えてしまうことがあります。この余白は、「画像の下端」が「文字のベースライン」に揃えて表示されることが原因です。CSSを使って「画像の下端」を「行の下端」に揃えるよう装飾すれば、謎の余計な隙間を消すことができます。 この「画像の下に見える余白」は、なぜできてしまうのでしょうか？その原因は、「画像の下端は、ベースラインに揃えて表示される」という仕様があるからです。 日本語文字の場合はどの文字も下端の位置は共通なので気にすることはありませんが、アルファベットでは下図のように「文字の下端」が異なります。 上図の赤色の線のことを「ベースライン」と呼びます。アルファベットの多くの文字は、このベースラインに下端が揃います。しかし、小文字の「g」や「j」や「y」などの一部の文字は、
![2/3 画像の下に謎の隙間ができるのを防ぐ方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/07356548dced5830ac122644793311a373810346/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F8%2F8%2F9%2Ftopimg_original.png)
