Неверные размеры гиперссылки изображения

Question

Я пытаюсь добавить гиперссылку на изображение, и оно работает нормально, но когда я наведу курсор мыши на узел <A>...</A> в Chrome Dev Tools, оно показывает неправильные размеры.

Dev Tools показывает что размеры 512x18, и это также показывает, что блочная модель смещена ниже изображения примерно на 5 пикселей или около того.

Я не понимаю, почему это происходит или что здесь происходит. Если у меня есть изображение 512x512 пикселей, я хочу, чтобы размеры гиперссылки были 512x512 пикселей.

<A HREF="https://via.placeholder.com/512"><IMG ALT="Text" SRC="https://via.placeholder.com/512"/></A>

Я пытался добавить атрибуты WIDTH и HEIGHT к изображению, но это не сработало. Казалось, что единственный способ заставить его работать, это добавить определенный размер CSS к окружающему элементу гиперссылки <A>...</A>.

STYLE="display: inline-block; width: 512px; height: 512px"

Есть ли другой способ сделать это без необходимости жесткого кода размеры изображения?

Answer 1

Добавить «display: inline-flex;» на теге привязки вы получите те же размеры изображения для тега привязки. Я добавил его в приведенный ниже фрагмент кода, но вы можете переместить это свойство в файл CSS:

<A HREF="https://via.placeholder.com/512" style="display:inline-flex;"><IMG ALT="Text" SRC="https://via.placeholder.com/512"/></A>

Answer 2

Создание тега img для блокировки и привязки тега к встроенному блоку также приводит к росту до 512 пикселей