why the image not on the same line with the text?

http://xanlz.com/template

the image (small logo)is much closed to 开发者_Python百科 the browser top border than the text. but the text isn't why?

---

Your image needs to be vertically aligned to the text. Here's the CSS:

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

The reason is how the browser interprets 'line height' and how it positions inline-elements as well as text inside that vertical space.

---

here is how I placed several images and words on the same line:

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

Inline style takes up only as much width as it needs, and does not take new lines.

---

Because the text COULD contain an uppercase letter that is higher and the font has margins to keep it readable that are not shared by the image.

---

To fix you could add position: relative to the img element and a top value of 2px:

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

Or any other value for top if you want fine-grained control over where it sits exactly.