解决HTML img元素底部幽灵空隙问题

在使用div包裹<img>元素时，可能会遇到元素底部出现异常空隙的问题。

问题原因

1. 行内元素的基线对齐特性
2. 父容器的默认行高设置
3. 图片与文本混合时的垂直对齐问题

解决方案

方法一：设置图片为块级元素

<img src="/path/to/image.jpg" style="display: block;" />

或在 CSS 中全局设置：

img {
	display: block;
}

方法二：调整垂直对齐方式

<img
	src="/path/to/image.jpg"
	style="vertical-align: middle; display: inline-block;" />

方法三：移除父元素的行高

.post-content img {
	line-height: 0;
}

方法四：使用负边距（不推荐）

img {
	margin-bottom: -4px;
}