无内边距、边框、外边距时父元素高于子图片，底部多余像素来源是什么？

产生原因 #

img属于行内替换元素，默认vertical-align属性值为baseline，浏览器会为行内元素预留底部的行高空间，用来容纳文字的下伸部分（比如g、p、y等字母的下沉区域），这部分额外空间就是父元素底部多出像素的来源，你看到的灰色区域就是父元素.element露出的背景。

解决方案 #

你可以选择以下任意一种方案解决：

• 方案1：修改图片的垂直对齐属性，改动最小，适用场景最广

img {
  width: 100%;
  vertical-align: bottom; /* 也可替换为top、middle等值 */
}

• 方案2：将图片转为块级元素，脱离行内布局规则

img {
  width: 100%;
  display: block;
}

• 方案3：父元素内无其他文字内容时，可设置父元素行高为0

.element {
  background-color: gray;
  border: none;
  line-height: 0;
}

• 方案4：父元素内无其他文字内容时，也可设置父元素字体大小为0

.element {
  background-color: gray;
  border: none;
  font-size: 0;
}

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