html - display:inline-block和伪元素做垂直放置

我正在使用display:inline-block和伪元素（::before，::after）来执行[vertically-middle]
但它不起作用，伪元素将占据一行
即使width是0，我也不知道为什么？

我知道执行此操作的其他方法（例如flex，position，line-height ...）
我只是好奇，这怎么了？
谢谢大家。下面或此处的演示：https://jsfiddle.net/pm06tkjs/

.container{
  height: 200px;
  background: rgba(0, 0, 0, 0.2);
}

.container::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}

.img-group {
  display: inline-block;
  vertical-align: middle;
}

img {
  display: inline-block;
  margin-right: -4px;
  max-width: 20%;
  height: auto;
}

<div class="container">
  <div class="img-group">
    <img src="https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg" alt="">
    <img src="https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg" alt="">
    <img src="https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg" alt="">
    <img src="https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg" alt="">
    <img src="https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg" alt="">
  </div>
</div>

最佳答案

内联元素之间的默认边距是问题！要解决此问题，请为内联元素父级添加font-size:0。

.container{
  height: 200px;
  background: rgba(0, 0, 0, 0.2);
  font-size:0;
}

.container::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}

.img-group {
  display: inline-block;
  vertical-align: middle;
  font-size:0;
}

img {
  display: inline-block;
  max-width: 20%;
  height: auto;
}

<div class="container">
  <div class="img-group">
    <img src="https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg" alt="">
    <img src="https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg" alt="">
    <img src="https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg" alt="">
    <img src="https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg" alt="">
    <img src="https://www.penghu-nsa.gov.tw/FileDownload/Album/Big/20161012162551758864338.jpg" alt="">
  </div>
</div>

有关如何消除内联元素之间的间隙的更多详细信息，请检查here

关于html - display:inline-block和伪元素做垂直放置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56862709/