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.