如何使用 HTML 和 CSS 在图库中的图像之间制作没有边距或间距 [重复]答案

【问题标题】：How to make NO margin or spacing in between images in a gallery using HTML and CSS [duplicate]如何使用 HTML 和 CSS 在图库中的图像之间制作没有边距或间距 [重复]
【发布时间】：2018-08-04 17:05:45
【问题描述】：

我希望画廊中的图像之间没有空间，这样它们都可以触动。到目前为止，这是我的代码。

div.gallery { 
    width: 470px;
    display: inline-grid;
    
}
div.gallery img {
    width: 100%;
    height: auto;
}

.gallery-all {
    text-align: center;
}

    <div class="gallery-all">
    <div class="gallery">
  <a target="_blank" href="img_fjords.jpg">
    <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
  </a>
</div>
    <div class="gallery">
  <a target="_blank" href="img_fjords.jpg">
    <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
  </a>
</div>
    <div class="gallery">
  <a target="_blank" href="img_fjords.jpg">
    <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
  </a>
</div>
    <div class="gallery">
  <a target="_blank" href="img_fjords.jpg">
    <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
  </a>
</div>
    
    <!-- SECOND LINE -->
    <div class="gallery">
  <a target="_blank" href="img_fjords.jpg">
    <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
  </a>
</div>
    <div class="gallery">
  <a target="_blank" href="img_fjords.jpg">
    <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
  </a>
</div>
    <div class="gallery">
  <a target="_blank" href="img_fjords.jpg">
    <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
  </a>
</div>
    <div class="gallery">
  <a target="_blank" href="img_fjords.jpg">
    <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
  </a>
</div>
    </div>

【问题讨论】：

标签： html css

【解决方案1】：

div.gallery { 
    width: 470px;
    display: inline-grid;
    
}
div.gallery img {
    width: 100%;
    height: auto;
margin-bottom: -5px;
}

.gallery-all {
    text-align: center;
}

    <div class="gallery-all">
    <div class="gallery">
  <a target="_blank" href="img_fjords.jpg">
    <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
  </a>
</div>
    <div class="gallery">
  <a target="_blank" href="img_fjords.jpg">
    <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
  </a>
</div>
    <div class="gallery">
  <a target="_blank" href="img_fjords.jpg">
    <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
  </a>
</div>
    <div class="gallery">
  <a target="_blank" href="img_fjords.jpg">
    <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
  </a>
</div>
    
    <!-- SECOND LINE -->
    <div class="gallery">
  <a target="_blank" href="img_fjords.jpg">
    <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
  </a>
</div>
    <div class="gallery">
  <a target="_blank" href="img_fjords.jpg">
    <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
  </a>
</div>
    <div class="gallery">
  <a target="_blank" href="img_fjords.jpg">
    <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
  </a>
</div>
    <div class="gallery">
  <a target="_blank" href="img_fjords.jpg">
    <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
  </a>
</div>
    </div>

【讨论】：

感谢您与顶线和底线一起工作，但与左右图像无关
也许是这样：div.gallery img { width: 470px;高度：自动；边距底部：-5px；左边距：0px；右边距：0px； }