CSS – 冷知识 (新手)
作者：互联网
<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 就看情况而已, 不担心了.
标签：img,vertical,bottom,align,知识,新手,CSS,4px 来源： https://www.cnblogs.com/keatkeat/p/15907338.html