在圖像標籤周圍添加錨標籤時出現問題

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>