Атрибут vspace тега <img> — відступи зверху й знизу

HTML

<div class="head1">
<p>У цьому прикладі, Ви можете змінювати значення для властивості vspace в межах від 0 до 100 переміщаючи повзунок.</p>
<p id="text"></p>
<input type="range" min="0" max="100" step="1" value="0" id="range" onmousemove="f()"> 
</div> 
<hr>

<div class="blok">
  <p> З використанням атрибута vspace  
  </p>
  <p class = "text"  style ="color:#c500c5">
    <img id="image"src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='160' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Альтернативний текст"/> 
    <br>
      Марія Познанська
    <br><br>
         ВИПАВ СНІГ
    <br><br>
    Ой у лісі лист зів'яв! <br>
    Білий сніг у лісі впав<br> 
    На дубочки молоденькі,<br>
    На ялинки зелененькі.<br>
    </p>
</div>
<div class="blok">
  
 <p> Без використанням атрибута vspace
  </p>
  <p style ="color:#c500c5">
    <img id="image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='160' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Альтернативний текст"/>
  <br>
    Марія Познанська
<br><br>
     ВИПАВ СНІГ
<br><br>
Ой у лісі лист зів'яв! <br>
Білий сніг у лісі впав<br> 
На дубочки молоденькі,<br>
На ялинки зелененькі.<br>
</div>

CSS

.blok{
  display:blok;
  float:left;
  border:1px solid ;
  padding:20px;
}

.head1{
  text-align:center;
}

JS

text.innerHTML = "Поточний відступ від зображення по вертикалі : 0";
function f() {
  var range = document.getElementById("range").value;
  var element = document.getElementById("image");
  var text = document.getElementById("text");

  element.setAttribute("vspace", range);
  text.innerHTML = "Поточний відступ від зображення по вертикалі:" + range;
}
//# sourceURL=pen.js

HTML

<div class="box">
    <p>Текст до картинки. <img class="pic" width="60" height="40" alt="Зразок"
        src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='60'%20height='40'%3E%3Crect%20width='60'%20height='40'%20fill='%232f6fd0'/%3E%3C/svg%3E">
        без відступів зовсім.</p>

    <p>Текст. <img class="pic" vspace="20" hspace="14" width="60" height="40" alt="Зразок"
        src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='60'%20height='40'%3E%3Crect%20width='60'%20height='40'%20fill='%2372b043'/%3E%3C/svg%3E">
        vspace="20" hspace="14".</p>

    <p>Текст. <img class="pic" vspace="-15" width="60" height="40" alt="Зразок"
        src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='60'%20height='40'%3E%3Crect%20width='60'%20height='40'%20fill='%23c0392b'/%3E%3C/svg%3E">
        vspace="-15" — від'ємне значення відкинуто.</p>

    <p>Текст. <img class="pic" vspace="5%" width="60" height="40" alt="Зразок"
        src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='60'%20height='40'%3E%3Crect%20width='60'%20height='40'%20fill='%23f2b134'/%3E%3C/svg%3E">
        vspace="5%" — відсоток від ШИРИНИ цієї сірої коробки.</p>

    <p>Текст. <img class="pic top-only" width="60" height="40" alt="Зразок"
        src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='60'%20height='40'%3E%3Crect%20width='60'%20height='40'%20fill='%23884ea0'/%3E%3C/svg%3E">
        margin-top: 24px — лише зверху, атрибутом так не вміє ніхто.</p>
</div>

CSS

.box {
    width: 400px;
    background: #f1f4f8;
    border: 1px solid #b9c6d8;
}

.box p {
    margin: 0;
    padding: 0 10px;
    max-width: 100%;
}

.box p:nth-child(odd) {
    background: #e2e9f2;
}

.pic {
    outline: 2px dashed #d64545;
    vertical-align: middle;
    background: #fff;
}

.top-only {
    margin-top: 24px;
}