如何使用html修复图像上悬垂的空白区域?

时间:2013-09-14 18:08:09

标签: css wordpress html web

基本上,使用以下代码:

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

有什么想法吗?

1 个答案:

答案 0 :(得分:2)

只需添加img { display: block; }或更具体的图片内容。

以下是解决方案示例的链接:http://jsfiddle.net/WvmhX/1/

这种奇怪行为的原因是因为<img>元素被视为Replaced Elements

来自Impressive网站的帖子"The Difference Between “Block” and “Inline”"

  

基本上,这些既不是块也不是内联。但是你可以将它们归类为更接近内联的东西,但是具有类似块的结构。