为什么我的img的边距可以点击？

Question

为什么我的图像边距可以点击？奇怪的是当我将高度和宽度更改为100px时,边距消失了.(在Firefox上)

我对img的CSS是

#cheese {
    margin-right: 100px;
}

这是jsfiddle链接:http: //jsfiddle.net/6e4gM/3/

谢谢!

Answer 1

因为边距在<img>里面<a>.里面的一切<a>都是可点击的,包括孩子的边缘.

Webkit浏览器(Chrome,Safari)在这方面有一些有趣的行为,当元素用背景或边框或其他东西设置样式时,它们似乎只在边距上应用可点击性:

http://jsfiddle.net/6e4gM/12/

IE(我测试过11)更糟糕,它忽略了所有情况下的边距.

如果添加display: inline-block;到<a>元素,则可以获得通用行为:

http://jsfiddle.net/6e4gM/14/