Атрибут hspace тега <object> — відступи з боків

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">
 <p><object id ="image" 
data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='180'%3E%3Crect%20width='320'%20height='180'%20fill='%231b2536'/%3E%3Crect%20x='12'%20y='12'%20width='296'%20height='156'%20fill='%23264653'/%3E%3Ccircle%20cx='160'%20cy='90'%20r='42'%20fill='%23e63946'/%3E%3Cpath%20d='M146%2066%20192%2090%20146%20114Z'%20fill='%23ffffff'/%3E%3C/svg%3E">
   </object>Анімація  — вид кіномистецтва, твори якого створюються шляхом знімання послідовних фаз руху намальованих (графічна анімація) або об'ємних (об'ємна анімація) об'єктів.</p>
<br>
 </div>
<div class="blok">
  
 <p> Без використанням атрибута hspace
  </p>
  <p style ="color:#c500c5">
<p><object  
data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='180'%3E%3Crect%20width='320'%20height='180'%20fill='%231b2536'/%3E%3Crect%20x='12'%20y='12'%20width='296'%20height='156'%20fill='%23264653'/%3E%3Ccircle%20cx='160'%20cy='90'%20r='42'%20fill='%23e63946'/%3E%3Cpath%20d='M146%2066%20192%2090%20146%20114Z'%20fill='%23ffffff'/%3E%3C/svg%3E">
  </object>Анімація — вид кіномистецтва, твори якого створюються шляхом знімання послідовних фаз руху намальованих (графічна анімація) або об'ємних (об'ємна анімація) об'єктів.</p>

</div>

CSS

.blok{
  display:blok;
  float:left;
  border:1px solid ;
  width:85%;
  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

<p> З використанням атрибуту <code> hspace </code> </p> 
 <p><object id ="image"  hspace="200"
data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='180'%3E%3Crect%20width='320'%20height='180'%20fill='%231b2536'/%3E%3Crect%20x='12'%20y='12'%20width='296'%20height='156'%20fill='%23264653'/%3E%3Ccircle%20cx='160'%20cy='90'%20r='42'%20fill='%23e63946'/%3E%3Cpath%20d='M146%2066%20192%2090%20146%20114Z'%20fill='%23ffffff'/%3E%3C/svg%3E">
   </object>Анімація  — вид кіномистецтва, твори якого створюються шляхом знімання послідовних фаз руху намальованих (графічна анімація) або об'ємних (об'ємна анімація) об'єктів.</p>
<br>
  <p> Без використання атрибуту <code> hspace  </code> </p>
<p><object  
data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='180'%3E%3Crect%20width='320'%20height='180'%20fill='%231b2536'/%3E%3Crect%20x='12'%20y='12'%20width='296'%20height='156'%20fill='%23264653'/%3E%3Ccircle%20cx='160'%20cy='90'%20r='42'%20fill='%23e63946'/%3E%3Cpath%20d='M146%2066%20192%2090%20146%20114Z'%20fill='%23ffffff'/%3E%3C/svg%3E">
  </object>Анімація — вид кіномистецтва, твори якого створюються шляхом знімання послідовних фаз руху намальованих (графічна анімація) або об'ємних (об'ємна анімація) об'єктів.</p>

HTML

<p class="flow">
    <object class="side" hspace="30" width="80" height="50"
        data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='50'%3E%3Crect%20width='80'%20height='50'%20fill='%23f2b134'/%3E%3C/svg%3E"></object>
    1. hspace="30" — порожнє поле по 30 пікселів з обох боків вставки. Текст
    обтікає її й не липне до краю. Атрибут завжди симетричний: одне число
    працює одразу на два боки.
</p>

<p class="flow">
    <object class="side css-margin" width="80" height="50"
        data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='50'%3E%3Crect%20width='80'%20height='50'%20fill='%2372b043'/%3E%3C/svg%3E"></object>
    2. Те саме через стилі: margin: 0 30px. Ніякого hspace у розмітці немає,
    вигляд той самий — і саме так це записують сьогодні.
</p>

<p class="flow">
    <object class="side one-side" hspace="30" width="80" height="50"
        data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='50'%3E%3Crect%20width='80'%20height='50'%20fill='%232f6fd0'/%3E%3C/svg%3E"></object>
    3. Тут стоїть і hspace="30", і правило margin-left: 30px; margin-right: 0.
    Виграє CSS: ліворуч відступ є, праворуч його немає. Атрибутом такого
    не зробити взагалі.
</p>

CSS

.flow {
    max-width: 520px;
    margin: 0 0 16px;
    padding: 8px;
    background: #eef3fb;
    overflow: hidden;
}

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

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

.one-side {
    margin-left: 30px;
    margin-right: 0;
}