1

HTML でフォト ギャラリーを作成し、CSS でサムネイルの間にスペースを追加しています。私が遭遇している問題は、サムネイル画像をクリックすると、マージンまたはパディングに応じて、「a」タグのハイパーリンクが画像の下、上、または横にぶら下がっていることです。これを取り除き、ハイパーリンクをサムネイル画像のみの範囲内にとどめるにはどうすればよいですか?

HTML

<html>
  <head>
    <title>Photo Gallery</title>
  </head>
  <body>
    <div class="gallery">
      <a href="EastAsia/eastasia_photo1.html"><img src="../images/EastAsia/1.jpg" alt=" "></a>
      <a href="EastAsia/eastasia_photo1.html"><img src="../images/EastAsia/1.jpg" alt=" "></a>
      <a href="EastAsia/eastasia_photo1.html"><img src="../images/EastAsia/1.jpg" alt=" "></a>
      <a href="EastAsia/eastasia_photo1.html"><img src="../images/EastAsia/1.jpg" alt=" "></a>
    </div>      
  </body>
</html>

CSS

body {
  margin: 0 auto;
  background-color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  padding: 0;
  width: 960px;
}

img {
  display: inline-block;
  margin: 15px;
  width: 150px;
  height: 100px;
}

みんな、ありがとう。最終的に各画像を Div クラスに入れ、そのクラスにマージンを設定して問題を解決しました!

4

2 に答える 2