Нижняя сторона "display: block" для изображений?

Есть ли недостаток в преобразовании img из встроенных блоков в объекты блока с display: block свойство CSS- display: block?

В большинстве случаев я хочу, чтобы они были block элементами. Любые полезные inline аспекты, которые я теряю? (Может быть, я не вижу какой - то, как полезно?)

Должны ли все изображения быть преобразованы в block элементы по умолчанию? Почему они являются встроенными блочными элементами в соответствии со спецификацией?

PS Я задаю это соображениями для компоновки с помощью позиционирования и поплавков и окружающих элементов.

Ответ 1

Хорошо, учитывая, что блок заставит что-нибудь после разрыва строки, есть только один сценарий, где было бы плохо:

Если вы планируете использовать другой встроенный элемент (текст, другое изображение, интервал и т.д.)

Ответ 2

Поместите img { display: block; } img { display: block; } в вашем CSS и забыть об этом. В крайне редком случае вам нужно что-то другое написать исключение.

Ответ 3

Существует один недостаток: если вы планируете горизонтально центрировать изображение, применяя "text-align: center" к родительскому элементу, вы не можете отображать изображение как блок или встроенный блок.

Ответ 4

Один хак, найденный для отображения блока: "блок".

У меня был этот образ и волновая волна waveurfer, которую я хотел как встроенный. Но дисплей: "блок"; в js waveurfer не позволял это.

Я сделал это, сохранил этот файл cdn локально и изменил отображение на inline и позицию до абсолютного, что решило мою проблему. Предполагается, что изменение происходит там, где создается волновой элемент.

Надеюсь, это поможет кому-то. Создатели Thanku waveurfer для таких удивительных js.