Why is the margin of my img clickable?

Question

Why is the margin of my image clickable? The strange thing is when I change the height and width to 100px the margin disappears. (on Firefox)

My CSS for the img is

#cheese {
    margin-right: 100px;
}

Here is jsfiddle link: http://jsfiddle.net/6e4gM/3/

Thanks!

Answer 1

Because the margin is on <img> which is inside <a>. Everything inside <a> is clickable, including margin's of children.

Webkit browsers (Chrome, Safari) have a bit of funny behavior in this, they only seem to apply clickability on the margin when that element is styled with a background or borders or something:

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

IE (I tested 11) is even worse, it ignores the margins in all cases.

You can get universal behavior if you add display: inline-block; to the <a> elements:

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