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?
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.
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.
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.
How about border: 10px solid transparent
?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With