HTML 标签字体偏移布局

Question

请看下面两张图片。第一个是<font color="#3f3fff">test</font>而第二个是 <font style="font-size: 8px;">test</font>

http://i.stack.imgur.com/XXnop.png

http://i.stack.imgur.com/Dphf8.png

“字体”元素的 CSS 如下:

display: inline-block;
line-height:32px !important;
font-weight: 300;

神秘的是，如您所见，当我设置颜色时，一切都符合预期，但如果我设置字体大小或(不在图片中)字体系列，它会在上方添加一个烦人的空间它可以在第二张图片中看到。我无法弄清楚它来自哪里，因为我已经设置了行高。我还检查了 Font 元素和父元素的边距和填充，但没有成功。

这个间距不会出现在元素检查器中，但实际上它确实使容器放大了 1 或 2 个像素。

如果我把它设置为display:block，它并没有增加空间，但显然这不是一个理想的效果。

知道问题出在哪里吗？

Answer 1

只需指定 vertical-align: middle |顶部|底部 | {等等等等}

你还可以在不同的上下文中使用vertical-align来非常灵活和细粒度地对齐元素。不需要知道元素的大小。元素保持在流中，因此其他元素可以对这些元素的变化维度使用react。