Помогите выровнять текст возле картинки.

Общее
1

Помогите выровнять текст к картинке так , что-бы он был чуть чуть выше.
Заранее спасибо.

Скриншот (1 оригинал, 2 как надо) :
1 Картинка
image
image.png911×174 6.74 KB

2 Картинка
image
image.png917×179 6.98 KB

Код

HTML: 
      <div class="blogers">
         		<div class="blogers-blog">
         			<p class="profil"><img src="photo-camera-2.png"><span class="channel-main"><span class="name-chanel"> Название Канала</span><br><span class="full-name">Имя Фамилия</span><br> <span class="small-description">Краткое описания, что , откуда, зачем</span></span></p>
         		</div>
         	</div>



CSS:
div.blogers {
border: 1px solid black;
margin-top: 30px;
width: 802px;
}
div.blogers-blog {
margin: 20px 0 20px 20px;
}
img {
border-radius: 50%;
}
.name-chanel {
padding-left: 7px;
font-size: 19px;
}
.full-name {
font-size: 10px;
color: lightgray;
}
.small-description {
font-size: 13px;
}

2

Картинку вынести за тег p, если будут трудности - загрузите код на кодпен или еще куда-нибудь, помогу

3

Теперь картинка просто выше текста, я попытался добавить img css свойство float: left; , и теперь текст , как бы , прилипает к картинке, а такие отступы как margin и padding не работают.

4

Первое, что пришло в голову на скорую руку…

код 
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .blogers {
    width: 882px;
    height: 148px;
    margin-top: 30px;
    border: 1px solid black;
  }

  .blogers-blog {
    margin: 20px;
  }

  img {
    float: left;
  }

  .channel-main {
    display: inline-block;
    margin-left: 10px; 
  }

  .name-chanel {
    font-family: Arial, sans-serif;
    font-size: 21px;
    line-height: 0.9;
  }

  .full-name {
    font-family: Arial, sans-serif;
    font-size: 10px;
    line-height: 2;
    color: lightgray;
  }

  .small-description {
    font-family: Arial, sans-serif;
    font-size: 14px;
  }
  </style>
</head>
<body>
  <div class="blogers">
    <div class="blogers-blog">
        <img src="photo-camera-2.jpg" width="72" height="72">
        <div class="channel-main">
            <div class="name-chanel">Название Канала</div>
            <div class="full-name">Имя Фамилия</div>
            <div class="small-description">Краткое описания, что , откуда, зачем</div>
        </div>
    </div>
  </div>
</body>
</html>
5

Спасибо за ответ, он почти правильный, следующая проблема в том , что текст максимально сближен к картинке , это можно исправить задав картинке справа и слева внутренние отступы (но беда в том что я не хочу отдалять картинку от левого края бордера, и если задать только отступы справа/слева , то картинка будет искажаться).Реально ли исправить это?

6 
  .channel-main {
      display: inline-block;
      margin-left: 10px;       /*  вставьте нужное значение */
  }