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

<分区>

我正在制作一个纯 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 解决了这个问题。

最佳答案

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

关于html - 无法从我的代码中删除不需要的边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27731734/