无法从我的代码中删除不需要的边距

Question

我正在制作一个纯CSS画廊，这就是我的代码目前的样子：

body {
  background: lightgrey
}
input[type=radio] {
  display: none
}
#gallery {
  width: 85vh;
  height: 65vh;
  margin: 0 auto;
  background: pink
}
label > img {
  width: 17vh
}

<div id="gallery">
  <input id="img1" type="radio" name="img" checked>
  <label for="img1" class="img img1">
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
  </label>
  <input id="img2" type="radio" name="img">
  <label for="img2" class="img img2">
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
  </label>
  <input id="img3" type="radio" name="img">
  <label for="img3" class="img img3">
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
  </label>
  <input id="img4" type="radio" name="img">
  <label for="img4" class="img img4">
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
  </label>
  <input id="img5" type="radio" name="img">
  <label for="img5" class="img img5">
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
  </label>
</div>

如您所见，即使我将所有边距和填充设置为0，也存在边距。任何想法可能是什么原因？

编辑：通过对图像应用display：block来解决它。

Answer 1

使用font-size:0;正如其他人所指出的那样，由于空白字符，空间正在显示。 删除，或设置font-size:0;或使用float:left;图片。

使用float-left

＆＃13;

＆＃13;

body {
  background: lightgrey
}
input[type=radio] {
  display: none
}
#gallery {
  width: 85vh;
  height: 65vh;
  margin: 0 auto;
  background: pink;
}
label > img {
  width: 17vh;
  float: left;
}

＆＃13;

<div id="gallery">
  <input id="img1" type="radio" name="img" checked>
  <label for="img1" class="img img1">
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
  </label>
  <input id="img2" type="radio" name="img">
  <label for="img2" class="img img2">
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
  </label>
  <input id="img3" type="radio" name="img">
  <label for="img3" class="img img3">
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
  </label>
  <input id="img4" type="radio" name="img">
  <label for="img4" class="img img4">
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
  </label>
  <input id="img5" type="radio" name="img">
  <label for="img5" class="img img5">
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
  </label>
</div>

＆＃13;

＆＃13;

＆＃13;

使用font-size:0;

＆＃13;

＆＃13;

body {
  background: lightgrey
}
input[type=radio] {
  display: none
}
#gallery {
  width: 85vh;
  height: 65vh;
  margin: 0 auto;
  background: pink;
  font-size: 0;
}
label > img {
  width: 17vh;
}

＆＃13;

<div id="gallery">
  <input id="img1" type="radio" name="img" checked>
  <label for="img1" class="img img1">
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
  </label>
  <input id="img2" type="radio" name="img">
  <label for="img2" class="img img2">
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
  </label>
  <input id="img3" type="radio" name="img">
  <label for="img3" class="img img3">
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
  </label>
  <input id="img4" type="radio" name="img">
  <label for="img4" class="img img4">
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
  </label>
  <input id="img5" type="radio" name="img">
  <label for="img5" class="img img5">
    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
  </label>
</div>

＆＃13;

＆＃13;

＆＃13;