为什么图像与文字不在同一行？

Question

http://xanlz.com/template

图像（小徽标）比文本更靠近浏览器顶部边框。但文字不是为什么？

Answer 1

您的图片需要与文字垂直对齐。这是CSS：

.f1 img {
    vertical-align: text-bottom;
}

原因在于浏览器如何解释“行高”以及它如何定位内联元素以及垂直空间内的文本。

Answer 2

这是我如何在同一行放置几个图像和文字：

<div style="display:inline;float:left"> some word </div>
<img style="display:inline;float:left".../>
<div style="display:inline;float:left"> word 2></div>
.....

内联样式只占用所需的宽度，并且不占用新行。

Answer 3

因为文本COULD包含一个更高的大写字母，并且字体具有边距以保持图像不共享的可读性。

Answer 4

要修复你可以添加位置：相对于img元素和顶部值2px：

.f1 img {
  position: relative;
  top: 2px;
}

如果你想要精确控制它所在的位置，那么top的任何其他值。