Атрибут vspace тега <img>

Описание

Атрибут vspace задаёт вертикальные отступы (сверху и снизу) вокруг элемента <img> в пикселях. Устарел в HTML5 - вместо него рекомендуется использовать CSS-свойство margin.

Пример использования (устаревший):
<img src="divider.png" alt="Декоративный разделитель" vspace="15" width="500">

Современная альтернатива на CSS:

CSS-свойство Пример Описание
margin-top и margin-bottom margin: 15px 0; Вертикальные отступы
padding padding: 15px 0; Внутренние отступы
gap gap: 15px; Для Flexbox и Grid контейнеров

Правильная реализация:

<style> .modern-spacing { display: block; margin: 15px auto; max-width: 100%; } </style> <img src="divider.png" alt="Современные отступы" class="modern-spacing" width="500">

Рекомендации по замене vspace:

  • Используйте margin для внешних отступов
  • Для адаптивного дизайна применяйте относительные единицы (em, rem)
  • Сочетайте с display: block для лучшего контроля потока
  • Используйте :first-child и :last-child для краевых случаев

Пример адаптивных вертикальных отступов:

<style> .responsive-spacing { margin: clamp(10px, 3vh, 30px) auto; display: block; } </style> <img src="section-divider.png" alt="Адаптивный разделитель" class="responsive-spacing" width="600">

Ограничения и совместимость:

  • Атрибут vspace работал только с выровненными изображениями (align)
  • CSS margin работает со всеми элементами независимо от позиционирования
  • Позволяет задавать разные отступы сверху и снизу
  • Совместим с современными системами вёрстки (Flexbox/Grid)

Примечание: Хотя атрибут vspace был прост в использовании, CSS предоставляет гораздо больше контроля над вертикальным пространством. Для профессиональной вёрстки используйте CSS-методы, особенно при работе с адаптивным дизайном и сложными макетами.