Javascript-форум - РАботе с текстом.

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - РАботе с текстом. (https://javascript.ru/forum/xhtml-html-css/27304-rabote-s-tekstom.html)

РАботе с текстом.

Здравсвуйте.
Подскажите пожалуйста, столкнулся со следующей проблемой.
Есть верстка:

<style type="text/css">
#main {
    border: 1px solid black;
    width: 300px;
}
</style>
<body>
<div id="main">
    <p id="text">
        You can improve your ability to gatherto gatherto gather        
        <img id="image" src="blankslot.png" width="98" height="23" />        
        information by grouping like items into basic categories.
    </p>
</div>

вот что мі видем на картинке

проблема в том, что мне нужно расположите текст так, чтоб отступы между строками в той строке, где находится картинка были такими же ,как и отступы между строками, где нет картинки. Как видите на рисунке ниже, в строке с картинкой отступ сверху больше(показываю его красным цветом)

при єтом html-верстка не должна менятся, только можно менять css
Помогите пожалуйста, как я могу это сделать? :(

line-height не подходит

используйте отрицательный margin
на высоту строк картинка теперь влиять не будет совсем
но будет наползать на текст

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>title</title>
<style>
#main {
    border: 1px solid black;
    width: 300px;
}
  #main img { margin-top: -23px; }  

</style>
</head>
<body>
  <div id="main">
    <p id="text">
        You can improve your ability to gatherto gatherto gather       
        <img id="image" src="http://placehold.it/98x23" width="98" height="23" />       
        information by grouping like items into basic categories.
    </p>
  </div>
</body>
</html>

Isaac, можно в изображение попробывать вписать:

align="absmiddle"

Ну а если через css, то можно попробывать прописать position:relative и margin-top: значение в px