图像网格之间的间隙

Question

* {
  margin: 0 auto;
} 

.photos {
  padding: 5%;
  background-color: #27ae60;
  box-sizing: content-box;
 }

 .photos > .photos-wrapper {
  width: 100%;
  text-align: center;
  align-content: center;
  overflow: hidden;
 }

 .photos > .photos-wrapper > .photo-1 {
  width: 50%;
  float: left;
  display: inline-block;
  margin: 0;
 }

.photos > .photos-wrapper > .photo-1 > img {
  width: 100%;
  margin: 0%;
 }

 .photos > .photos-wrapper > a > button {
  border: none;
  background-color: black;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 5px;
  border-radius: 5px;
  color: white;
  margin: 2% 2%;
  cursor: auto;
  padding: 2% 6%;
 }

<div class="photos">
 <div class="photos-wrapper wrapper">
  <div class="photo-1">
   <img src="https://s-media-cache-ak0.pinimg.com/originals/2c/57/83/2c57831c6f450a30dc21bd4353b3107a.jpg" alt="Mountain Photography"> 
  </div>

  <div class="photo-1">
   <img src="https://i.vimeocdn.com/video/376212686_1280.jpg"> 
  </div>
  <div class="photo-1">
   <img src="http://www.airpixa.co.uk/images/architectural-photography-london-skyline.jpg?crc=4158542412" alt="Mountain Photography"> 
  </div>

  <div class="photo-1">
   <img src="http://www.larissajoice.co.uk/wp-content/uploads/2016/11/M-Shed-Wedding-Photography-Bristol_0212.jpg" alt="Mountain Photography"> 
  </div>

  <div class="photo-1">
   <img src="https://i.ytimg.com/vi/XdYEzui3Ttc/maxresdefault.jpg" alt="Mountain Photography"> 
  </div>

  <div class="photo-1">
   <img src="https://nhd.usgs.gov/photos/08_Hells_Canyon.jpg" alt="Mountain Photography"> 
  </div>

 </div> 
</div>

http://codepen.io/anon/pen/BWQJgO

如此处所示，我正在尝试制作图像网格，但图像行之间存在间隙，我想将其去除。任何帮助，将不胜感激！ :)

Answer 1

尝试添加此样式：.photos img { display: block; }

看到这个codepen

图像网格之间的间隙

Gap in-between image grid

html

css

grid

positioning