在图像标签周围添加锚标签时出现问题

Question

我的 Flex Gallery 运行良好，唯一的问题是当我将 <a> 标签添加到 <img> 标签周围时，一切都变得混乱。

当我用 <a> 标签包裹 <img> 标签以便我可以打开全尺寸图像时，它最终会弄乱整个设计，我确信我的 CSS 中的某些内容弄乱了它，如何修复它

html,
body,
h1,
h2,
section,
div {
  margin: 0;
  padding: 0;
}

body {
  max-width: 76.5rem;
  padding: clamp(0.5rem, 2vw, 2rem);
  margin: auto;
}

.gallery {
  margin-top: 2rem;
}

.gallery>div {
  columns: 16em;
  gap: 1.25rem;
  padding-top: 1.25rem;
}

.gallery img {
  display: block;
  width: 100%;
  margin-bottom: 1.25rem;
}

<section class="gallery">
  <h2>Gallery Title Here</h2>
  <div>
    <img src="https://source.unsplash.com/OyCl7Y4y0Bk" alt="">
    <img src="https://source.unsplash.com/Kl1gC0ve620" alt="">
    <img src="https://source.unsplash.com/55btQzyDiO8" alt="">
    <img src="https://source.unsplash.com/g0dBbrGmMe0" alt="">
    <img src="https://source.unsplash.com/v1OW17UcR-Q" alt="">
    <img src="https://source.unsplash.com/Wpg3Qm0zaGk" alt="">
    <img src="https://source.unsplash.com/W3FC_bCPw8E" alt="">
    <img src="https://source.unsplash.com/rBRZLPVLQg0" alt="">
    <img src="https://source.unsplash.com/RRksEVVoU8o" alt="">
  </div>
</section>

Answer 1

对我来说效果很好。锚标记零差异。

html,
body,
h1,
h2,
section,
div {
  margin: 0;
  padding: 0;
}

body {
  max-width: 76.5rem;
  padding: clamp(0.5rem, 2vw, 2rem);
  margin: auto;
}

.gallery {
  margin-top: 2rem;
}

.gallery>div {
  columns: 16em;
  gap: 1.25rem;
  padding-top: 1.25rem;
}

.gallery img {
  display: block;
  width: 100%;
  margin-bottom: 1.25rem;
}

<section class="gallery">
  <h2>Gallery With Links</h2>
  <div>
    <a href="google.com"><img src="https://source.unsplash.com/OyCl7Y4y0Bk"></a>
    <a href="google.com"><img src="https://source.unsplash.com/Kl1gC0ve620"></a>
    <a href="google.com"><img src="https://source.unsplash.com/55btQzyDiO8"></a>
    <a href="google.com"><img src="https://source.unsplash.com/g0dBbrGmMe0"></a>
    <a href="google.com"><img src="https://source.unsplash.com/v1OW17UcR-Q"></a>
    <a href="google.com"><img src="https://source.unsplash.com/Wpg3Qm0zaGk"></a>
    <a href="google.com"><img src="https://source.unsplash.com/W3FC_bCPw8E"></a>
    <a href="google.com"><img src="https://source.unsplash.com/rBRZLPVLQg0"></a>
    <a href="google.com"><img src="https://source.unsplash.com/RRksEVVoU8o"></a>
  </div>
</section>

<section class="gallery">
  <h2>Gallery Without Links</h2>
  <div>
    <img src="https://source.unsplash.com/OyCl7Y4y0Bk">
    <img src="https://source.unsplash.com/Kl1gC0ve620">
    <img src="https://source.unsplash.com/55btQzyDiO8">
    <img src="https://source.unsplash.com/g0dBbrGmMe0">
    <img src="https://source.unsplash.com/v1OW17UcR-Q">
    <img src="https://source.unsplash.com/Wpg3Qm0zaGk">
    <img src="https://source.unsplash.com/W3FC_bCPw8E">
    <img src="https://source.unsplash.com/rBRZLPVLQg0">
    <img src="https://source.unsplash.com/RRksEVVoU8o">
  </div>
</section>