Как исправить нависающую пустую область на изображении, используя в html?

Question

В принципе, с помощью следующего кода:

HTML: <div id="himage"><a href="/mdp/"><img title="MDP!" src="/wp-content/uploads/2013/02/himage.jpg" width="370" height="190"></a></div>

CSS: #himage{width:370px;float:left;border:4px solid #0F651C;}

Я получаю следующее, что не то, что я хочу. Он продолжает добавлять этот белый участок чуть ниже, так что граница фактически не объехать изображения:/

ВЫВОД: http://i.imgur.com/AiuQFNR.png

Есть идеи?

Answer 1

Просто добавьте img { display: block; } или что-то более конкретное для вашего изображения.

Вот ссылка на пример решения: http://jsfiddle.net/WvmhX/1/

Причина этого странного поведения, потому что <img> элементы считаются Replaced Elements.

С поста Впечатляющий вебе "The Difference Between “Block” and “Inline”":

В основном, это ни блок, ни рядный. Но вы можете классифицировать их как нечто более близкое к встроенному, но с блочной структурой.