How to hide the background underneath the border

Question

I need to modify a website to make the clickable zone of all links bigger for mobile devices. I gave all links a transparent border and a negative margin<

Answer 1

i think that if the border were outside the element, the behaviour you are behind (that clicking on the border behaves as clicking inside the element) wouldn't work either

if the background-image is not repeated, you can set background-position x position to the same amount that your border width. else, you can also try setting the border-color to the same as the color behind the element, but if it is an image, good luck

Answer 2

CSS background fills the area of the border, with the border-color layering over this.

As you have a transparent border, it is displaying the background-color behind it.

With plain HTML/CSS, I'm not sure there is a way around this.

This jsFiddle demostrates this:

http://jsfiddle.net/hq65C/8/

Answer 3

How about background-clip: padding-box;?

Demo

Answer 4

try this:

<a href="#"><span style="background: red">link</span></a> test test test <br/>
test test test

notice: the span means an inline element with another style (other CSS values). other that div which will force a new block.