Can you make "an invisible border"?

html css border
ripper234 picture ripper234 · Apr 26, 2011 · Viewed 59.6k times · Source

I'm trying to make a navbar as an exercise.

I'm using a:hover to include a solid border around the button being hovered. However, this makes all the other buttons move by the size of the border.

What is the proper fix to this problem? I know there are others (discussed here), I specifically tried to make the border "be invisible yet take up space even when not hovered". I set border:transparent hoping it might do what I want, but it did not show take space at all.

I know I could hand pick the border's color to be equal to the background and make it solid, but this is not what I want. Is there a sane way to solve this issue?

Answer

Phliplip picture Phliplip · Apr 26, 2011

How about border: 10px solid transparent ?

Related questions

Placing border inside of div and not on its edge

I have a <div> element and I want to put a border on it. I know I can write style="border: 1px solid black", but this adds 2px to either side of the div, which is not what …

Read More
How to set a border for an HTML div tag

I am trying to define a border around a div tag in HTML. In some browsers the border does not appear. Here is my HTML code: How do I set a border for an HTML div tag?

Read More
How to increase space between dotted border dots

I am using dotted style border in my box like .box { width: 300px; height: 200px; border: dotted 1px #f00; float: left; } I want to the increase the space between each dot of the border.

Read More