CSS – 冷知识 (新手)
Posted 兴杰(stooges.com.my)
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 就看情况而已, 不担心了.
以上是关于CSS – 冷知识 (新手)的主要内容，如果未能解决你的问题，请参考以下文章