Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can you make "an invisible border"?

Tags:

html

css

border

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?

like image 249
ripper234 Avatar asked Apr 26 '11 12:04

ripper234


People also ask

How do you make a border not visible in CSS?

border-bottom-style:none|hidden|dotted|dashed|solid|double|groove| ridge|inset|outset|initial|inherit; Property Values: none: It is the default value and it makes the width of bottom border to zero. Hence, it is not visible.

Can you add padding to a border?

No, that's not possible. Padding, margin and border are all parts of elements, you can't give a border padding or a margin a border.

How do you put a border on 0?

We can specify the no border property using CSS border: none, border-width : 0, border : 0 properties. Approach 1: We will give border-color, border-style properties to both headings, for showing text with border and no-border. For no border heading, we will use the border-width : 0 which will result in no border.


1 Answers

How about border: 10px solid transparent ?

like image 124
Phliplip Avatar answered Oct 06 '22 01:10

Phliplip