かなり初心者の質問です。簡単なプログラミング

解決済

質問者：silentt
質問日時：2009/09/28 02:48
回答数：1件

サイト作りの練習にプログラミングをしてみたはいいものの
firefoxで確認してみると、画像の通り、リンクサイズとリンクに使う画像サイズの大きさが合わず、リンク幅のほうが若干大きく下に出てしまいます。
リンクサイズと画像サイズをぴったり合わせるにはどうすれば良いのでしょうか・・。はちゃめちゃですが、色んなものを0pxやnoneにして試してみたりしたのですが原因が分かりませんでした。誰かお助けくださいorz

「test2.html」

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http:www.w3.org/TR/xhtml1.DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang"ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<link rel="stylesheet" type="text/css" href="as2.css">

</head>
<body>
<h1>test</h1>
<p><a href="#"><img src="a.png" alt="test"></a>
</p></body>
</html>

「as2.css」

@charset="Shift_JIS";

p {
padding:0;
margin:0;
border:0;
}

img {
border:none;
padding:0;
margin:0;
width:120px;
height:30px;

}

a {
padding:0;
margin:0;
border:0;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： salonpath
回答日時：2009/09/28 03:04

firefox3.5.2だと画像のようにはならず、IEだと再現できました。

とりあえずimgにvertical-align:text-bottom;を指定するか

<p><a href="#"><img src="a.png" alt="test"></a>
</p>

を
<p><a href="#"><img src="../../img/dummy_80.gif" alt="test"></a></p>
にする（ソース上の</a>と</p>の間に改行があるから消す）

- 0
- 件

通報する

この回答へのお礼

バージョンを調べたところfirefox3.5.3だったです。
教えの通り、vertical-align:text-bottom;でスッキリ解決しました！
"../../img/dummy_80.gif"は知識不足で「？？？」状態でした、勉強しておきます。
感謝でいっぱいです、助かりました・・本当にありがとうございます！

通報する

お礼日時：2009/09/28 03:43

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！