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

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，也存在边距。知道可能是什么原因吗？

编辑：通过对图像应用显示：块解决了这个问题。

Answer 1

使用 font-size:0; 正如其他人指出的那样，space 显示是由于白色 space 字符。 删除它们，或设置 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>

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

Can't remove unwanted margins from my code

html

css

margin

使用`float-left`

使用`font-size:0;`

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

Can't remove unwanted margins from my code

html

css

margin

使用float-left

使用font-size:0;

使用`float-left`

使用`font-size:0;`