无法从我的代码中删除不需要的边距[重复]

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

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

<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>

使用font-size:0;

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;
}

<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>