リンクによるボーダーラインをCSSで非表示にする
HTMLのa要素を利用してリンクを設定するとブラウザはリンクであることを明確にするため文字の色を変更したり、アンダーラインを表示したり、マウスポインタの形状を変更したりすることがあります。
画像にリンクを設定した場合画像の周りにボーダーが表示されその分サイズが大きくなりレイアウトが崩れてしまうこともあります。HTMLのa要素のみのリンク
ブラウザにより画像の周りにボーダーが表示されていたりされていなかったりします。Internet Explorerやその他のブラウザではもともと画像にボーダーが表示されていません。
文字の下のボーダーを非表示
文字の下に表示されるボーダーを非表示にするにはCSSでa要素に対してtext-decoration:noneを設定します。
a{ text-decoration:none; }
文字に対するボーダーは非表示になるが画像のボーダーは非表示にならない。Firefoxではボーダーが表示されたままです。Internet Explorerやその他のブラウザではもともと画像にボーダーが表示されていません。
画像のボーダーを非表示
Firefoxで画像にリンクを設定した場合のボーダーを非表示にするにはCSSでimg要素にborder:noneを設定します。
img{ border:none; }
a要素の疑似クラスを使用した時の下線の色を消す
Inernet Explorer以外のブラウザの多くはa要素に:linkや:hoverなどの擬似クラスに背景色を設定すると画像にborder:none;を設定しても色が見えてしまうことがあります。これは画像の下にだけ表示されるのでborder-bottomの設定かと思うかもしれませんが背景色です。画像の下だけに線がついた状態（Internet Explorerでは画像の下に線は表示されていません。）マウスオーバー時（a:hover）のときに赤になることから背景色だとわかります。
画像下の背景色を非表示にするにはimg要素にvertical-align:text-bottomを設定します。
img{ vertical-align:text-bottom; }
親要素と画像下に隙間があく場合
画像を任意のボックスの一番下に配置した時ボックスの一番下にぴったりとくっつかずにわずかに隙間があいてしまう場合があります。（Internet Explorerでは画像の下に隙間はありません。）親要素の背景色が画像の下に見える
CSSで画像にvertical-align:bottomとすることで回避できます。
img{ vertical-align:bottom; }
または、親要素にline-hight:1を設定することでも回避可能（親要素内でデザイン的に使用できるかどうかは場合によります。）
.hako{line-height:1; }
だだしこの場合は画像に vertical-align:text-bottomが設定されていないと隙間があいてしまいます。
