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

Для будь-якого об'єкта можна задати невидимі відступи по горизонталі і вертикалі за допомогою атрибутів hspace і vspace. Атрибут vspace вказує порожній простір зверху і знизу об'єкта. Особливо це актуально при обтіканні об'єкта текстом, в цьому випадку необхідно навколо нього додати порожній простір.

48ab4c82ca020a448dcf5c23ad5f5027.png

автор: с3с

Загальний опис

автор: NagarD

Синтаксис

<object vspace="pixels">

Атрибут vspace може отримувати єдине значення:

pixels

Порожній простір у верхній і нижній частині об'єкта в пікселях.

автор: с3с

Переглядачі

Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
1+ 1+ 1+ 4+ 12+ 3+
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
1+ 1+ 1+ 1+

Приклади

+ запропонувати свій приклад у пісочниці 

<p> З використанням атрибуту <code> vspace </code> </p> 
 <p><object id ="image"  vspace="100"
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> vspace  </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>
автор: с3с

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">
 <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> Без використанням атрибута vspace
  </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("vspace", range);
  text.innerHTML = "Поточний відступ:" + range;
}
//# sourceURL=pen.js
автор: с3с

П'ять блоків. Перший — робочий vspace="30". Другий показує, що поля розсувають цілий рядок тексту. Третій — пастка з відсотками: два контейнери різної ШИРИНИ з тим самим vspace="20%" дають різні відступи ПО ВЕРТИКАЛІ. Четвертий — від'ємне й нечислове значення, від яких не лишається нічого. П'ятий — те, заради чого атрибут існував: обтікання, зроблене сучасним margin.

HTML

<p class="head">1. vspace="30" — поле згори й знизу</p>
<div class="ramka">
  <p>текст над</p>
  <object data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='60'%3E%3Crect%20width='120'%20height='60'%20fill='%232f6fd0'/%3E%3Ccircle%20cx='60'%20cy='30'%20r='20'%20fill='%23ffffff'/%3E%3C/svg%3E" type="image/svg+xml" width="120" height="60" vspace="30"></object>
  <p>текст під</p>
</div>

<p class="head">2. Об'єкт рядковий — його поля розсувають увесь рядок</p>
<div class="ramka">
  <p>рядок вище</p>
  <p>текст <object data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='60'%3E%3Crect%20width='120'%20height='60'%20fill='%232f6fd0'/%3E%3Ccircle%20cx='60'%20cy='30'%20r='20'%20fill='%23ffffff'/%3E%3C/svg%3E" type="image/svg+xml" width="120" height="60" vspace="40"></object> текст</p>
  <p>рядок нижче</p>
</div>

<p class="head">3. Пастка: vspace="20%" рахується від ШИРИНИ контейнера</p>
<div class="ramka vuzka">
  <p>Вузький контейнер, 240px завширшки. vspace="20%" дає близько 48px:</p>
  <object data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='60'%3E%3Crect%20width='120'%20height='60'%20fill='%232f6fd0'/%3E%3Ccircle%20cx='60'%20cy='30'%20r='20'%20fill='%23ffffff'/%3E%3C/svg%3E" type="image/svg+xml" width="120" height="60" vspace="20%"></object>
  <p>текст під</p>
</div>
<div class="ramka shyroka">
  <p>Той самий рядок у контейнері 560px завширшки. Той самий vspace="20%" — але вже близько 112px:</p>
  <object data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='60'%3E%3Crect%20width='120'%20height='60'%20fill='%232f6fd0'/%3E%3Ccircle%20cx='60'%20cy='30'%20r='20'%20fill='%23ffffff'/%3E%3C/svg%3E" type="image/svg+xml" width="120" height="60" vspace="20%"></object>
  <p>текст під</p>
</div>

<p class="head">4. vspace="-20" і vspace="abc" — жодного відступу</p>
<div class="ramka">
  <p>текст над</p>
  <object data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='60'%3E%3Crect%20width='120'%20height='60'%20fill='%232f6fd0'/%3E%3Ccircle%20cx='60'%20cy='30'%20r='20'%20fill='%23ffffff'/%3E%3C/svg%3E" type="image/svg+xml" width="120" height="60" vspace="-20"></object>
  <object data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='60'%3E%3Crect%20width='120'%20height='60'%20fill='%232f6fd0'/%3E%3Ccircle%20cx='60'%20cy='30'%20r='20'%20fill='%23ffffff'/%3E%3C/svg%3E" type="image/svg+xml" width="120" height="60" vspace="abc"></object>
  <p>текст під</p>
</div>

<p class="head">5. Заради чого це існувало — обтікання, зроблене через margin</p>
<div class="ramka">
  <object class="plavaye" data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='60'%3E%3Crect%20width='120'%20height='60'%20fill='%232f6fd0'/%3E%3Ccircle%20cx='60'%20cy='30'%20r='20'%20fill='%23ffffff'/%3E%3C/svg%3E" type="image/svg+xml" width="120" height="60"></object>
  <p>Текст обтікає об'єкт і не лізе йому впритул, бо в стилях задано
     margin: 10px 16px 10px 0. Це те саме, що колись писали як vspace="10" hspace="16",
     тільки з роздільним керуванням кожним боком і без сюрпризів з відсотками.</p>
</div>

CSS

.head {
    margin: 20px 0 6px;
    color: #5a6472;
    font: 600 14px/1.4 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ramka {
    max-width: 560px;
    padding: 8px 10px;
    border: 2px dashed #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
    overflow: hidden;
}

.ramka p {
    margin: 0;
}

.vuzka {
    max-width: 240px;
    border-color: #d64545;
    background: #fff8f8;
}

.shyroka {
    max-width: 560px;
    border-color: #d64545;
    background: #fff8f8;
}

object {
    outline: 2px solid #2f6fd0;
    outline-offset: 1px;
}

.plavaye {
    float: left;
    margin: 10px 16px 10px 0;
}
автор: NagarD

Різниця між HTML 4.01 та HTML5

Атрибут vspace для тега <object> не підтримується у HTML5. Користуйтесь для цього CSS.

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~		 Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень		 Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле веде сходинками (розділ → тип → сторінка), а хибний ключ підкреслить хвилею.
[[!sandbox/S0oh1hBm]] Живий приклад окремим рядком — саме вікно результату. Той самий ключ зі знаком !: наберіть [[! і дійдіть сходинками до потрібної сторінки, список покаже її приклади.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```		 Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження		 Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox		 Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає		 Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.		 Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||		 Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Правка
Зворотний зв'язок
Вхід