Атрибут style тега <figure>

Описание

Атрибут style в теге <figure> позволяет задавать inline-стили CSS непосредственно для контейнера с изображением и подписью. Эти стили применяются только к текущему элементу и имеют высокий приоритет.

Пример использования:
<figure style="border: 2px solid #e0e0e0; border-radius: 8px; padding: 15px; background: #f9f9f9;"> <img src="chart.png" alt="График продаж"> <figcaption>Рисунок 1. Динамика продаж по кварталам</figcaption> </figure>

Часто используемые свойства:

Категория CSS-свойства Пример применения
Оформление border, background, box-shadow Стилизация контейнера
Отступы margin, padding Позиционирование на странице
Размеры width, max-width, height Контроль габаритов контейнера

Пример с адаптивным дизайном:

<figure style="max-width: 100%; margin: 20px auto; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"> <img src="infographic.png" alt="Инфографика" style="width: 100%; height: auto;"> <figcaption style="font-style: italic; text-align: center; padding: 10px;"> Инфографика 1. Основные показатели </figcaption> </figure>

Рекомендации по использованию:

  • Используйте для разовых стилевых правок
  • Избегайте !important в inline-стилях
  • Для сложных стилей применяйте внешние CSS-файлы
  • Сочетайте с классами для базового оформления
  • Минимизируйте использование для производительности

Ограничения:

  • Усложняет поддержку кода
  • Не поддерживает медиа-запросы
  • Ограниченная поддержка CSS-переменных
  • Увеличивает размер HTML-документа

Примечание: Для постоянного оформления рекомендуется использовать внешние стили. Inline-стили лучше применять только для динамического изменения внешнего вида через JavaScript или уникальных случаев.