为什么图片底部和外层div容器边框之间存在多余空白，该如何解决？

这个空白是浏览器对行内元素的默认排版规则导致的：
img标签默认属于行内替换元素，浏览器默认给所有行内元素设置的对齐规则是基线对齐（vertical-align: baseline）——行内元素会默认对齐文本的基线，基线下方预留的、给p、q这类带下伸结构的字母展示的空间，就是你看到的这段空白。

可直接使用的解决方案： #

• 将img设置为块级元素
  给img添加样式：

  img {
    display: block;
  }
  

  块级元素不会触发行内元素的基线对齐规则，可直接消除空白。
• 修改img的垂直对齐规则
  给img添加非基线的对齐规则即可，可选值有bottom、middle、top，示例：

  img {
    vertical-align: bottom;
  }
  

• 外层容器设置字号为0
  如果你外层的.myItem容器内不需要放置其他文本内容，可以直接给容器设置：

  .myItem {
    font-size: 0;
  }
  

  相当于直接消除了基线预留的字符空间，也能解决空白问题。

内容的提问来源于stack exchange，提问作者Ami