<img> extra 4px at the bottom

参考: 

Extra 4px at the bottom of html <img>

The mysterious 4px gap in between images

效果

红色部分多出来的 4px. 原因是 img 是 inline element, 它可以和 text 并排.

注意紫色图片的位置, 这个叫 vertical-align, 默认是 baseline, 和字对齐, 所以它会有一个 4px, 因为字就是这样. 

所以要解决这个 4px 的问题. 可以 set vertical-align: bottom 或者直接把 img 换成 display:block (比如 Tailwind CSS 的 base 就是这样干的) 关键是懂原理, 之后用什么 solution 就看情况而已, 不担心了.