如何获得图像链接周围的：focus轮廓以不将其切断？

Question

I'm trying to change the look of the focus outline for when someone is tabbing through the website. The CSS I'm using is below:

:focus { outline: solid 6px orange; outline-offset: 3px }

The image link is generated using the below html:

<A href="http://www.google.com"><IMG src="http://us.usablenet.net/mt/a/hyatt.com/l1398691219000/icons/info.png"></A>

However for a link that has an image, this style is cutting through the image instead of around it. I can't post images, but here is the imgur link to the related screenshots taken from when I was trying to debug the issue on the Tryit Editor from w3schools

jsFiddle http://jsfiddle.net/k6vsckue/

Answer 1

a elements are displayed inline by default. The height property of inline elements cannot be change and so the image is overflowing out of the container. The outline on the a element then appears to 'cut' through it.

You can, however, change the display type to inline-block so the a's height will change to fit its image and achieve the effect you want.

CSS

A { display:inline-block; }

Live example: http://jsfiddle.net/5ho7rf46/