HTMLで画像の下に空白が出来てしまうのを防ぐ方法

HTMLで画像の下に空白が出来てしまうのを防ぐ方法
このエントリーをはてなブックマークに追加
PR

HTMLでimgタグを貼り付けると、画像の下に空白(隙間)が出来てしまうことが有ります
CSSに少しコードを加えてやるだけで無くなります

CSS

img {
    vertical-align:text-bottom;
}

img全部に指定してしまってもいいですし、個別に指定してもOK
これは文字のベースラインに合わせてを整えるもので、text-bottomにすることで、文字のベースラインが一番下になります。

通常のベースラインでは文字のはみ出る文が空白になってしまうのです

 

 

img関連と言えば 画像にリンクをつけると、IEでは枠線が表示されてしまうので予めimgにはこの2つを設定してやると良いですね

img {
    border: none;
    vertical-align:text-bottom;
}
PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)