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

Описание

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

Пример использования (устаревший):
<img src="photo.jpg" alt="Пример с горизонтальными отступами" hspace="20" align="left" width="300"> <p>Текст будет обтекать изображение с отступами по бокам.</p>

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

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

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

<style> .modern-spacing { float: left; margin-right: 20px; margin-left: 20px; margin-bottom: 10px; } </style> <img src="photo.jpg" alt="Современные отступы" class="modern-spacing" width="300"> <p>Текст корректно обтекает изображение с равномерными отступами.</p>

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

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

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

<style> .responsive-img { float: left; margin: 0 clamp(10px, 3vw, 30px) 15px clamp(10px, 3vw, 30px); max-width: 100%; } </style> <img src="landscape.jpg" alt="Адаптивные отступы" class="responsive-img" width="400">

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

  • Атрибут hspace работал только с выровненными изображениями (align)
  • CSS margin работает со всеми элементами и типами позиционирования
  • В отличие от hspace, CSS позволяет задавать разные отступы для каждой стороны
  • Современные методы (Flexbox/Grid) предлагают больше контроля над пространством

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