Атрибут hspace тега <img> — відступи ліворуч і праворуч

HTML

<div class="head1">
<p>У цьому прикладі, Ви можете змінювати значення для властивості hspace в межах від 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> З використанням атрибута hspace  
  </p>
  <p class = "text"  style ="color:#c500c5">
    <img id="image" align = "left" 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> Без використанням атрибута hspace
  </p>
  <p style ="color:#c500c5">
    <img id="image" align = "left" 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 ;
  width:46%;
  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("hspace", range);
  text.innerHTML = "Поточний відступ:" + range;
}
//# sourceURL=pen.js

HTML

<h3>1. Атрибут hspace="30" vspace="10"</h3>
<p><img class="pic" hspace="30" vspace="10" width="90" height="60" alt="Зразок"
    src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='90'%20height='60'%3E%3Crect%20width='90'%20height='60'%20fill='%23f2b134'/%3E%3C/svg%3E">
    Поле однакове з обох боків: між картинкою й лівим краєм колонки лишається
    порожнеча, якої тут нікому не потрібно. Одного боку атрибут не вміє —
    він завжди симетричний, і саме тому старі макети виглядають розхристано.</p>

<h3>2. Те саме стилями: margin: 10px 30px</h3>
<p><img class="pic css-margin" width="90" height="60" alt="Зразок"
    src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='90'%20height='60'%3E%3Crect%20width='90'%20height='60'%20fill='%2372b043'/%3E%3C/svg%3E">
    Один рядок у таблиці стилів дає той самий вигляд. Порядок значень —
    вертикаль, горизонталь; у повній формі це згори, праворуч, знизу, ліворуч.
    Атрибут при цьому перекривається повністю, навіть якщо лишився в розмітці.</p>

<h3>3. Відступ лише праворуч: margin: 0 16px 8px 0</h3>
<p><img class="pic css-right" width="90" height="60" alt="Зразок"
    src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='90'%20height='60'%3E%3Crect%20width='90'%20height='60'%20fill='%232f6fd0'/%3E%3C/svg%3E">
    Картинка притиснута до лівого краю колонки, а повітря лишилося тільки
    там, де воно потрібне — між нею й текстом. Атрибутом такого не зробити:
    hspace однаково додасть поле й ліворуч.</p>

CSS

h3 {
    margin: 22px 0 6px;
    font-size: 1em;
    color: #1b4f9c;
}

p {
    max-width: 520px;
    display: flow-root;
}

.pic {
    float: left;
    outline: 2px dashed #d64545;
}

.css-margin {
    margin: 10px 30px;
}

.css-right {
    margin: 0 16px 8px 0;
}