css - 如何在 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 .

来自 Impressive Web 的帖子 "The Difference Between “Block” and “Inline”" :

Basically, these are neither block nor inline. But you might classify them as something closer to inline, but with block-like structure.