'Elements move on hover because border is added, padding, as suggested elsewhere doesn't seem to work

When I hover over an area on my testing website, I made it so a border is added. But because that happens, other elements move. I've looked up other posts, and they recommended adding padding, but that doesn't seem to work because it goes over other stuff.

This is where I add the border:

#logo:hover {
  border: 2px solid cyan;
}

This is what it was added to:

#logo {
    width: 200px;
    height: 200px;
    position: relative;
    top: 80px;
    line-height: 12em;
    border-radius: 200px;
    margin: 0 10px 0 10px;
    overflow: hidden;
}

Does anyone know how to help me? Also about the way I asked my question.

#logo {
    background-color: black;
    width: 200px;
    height: 200px;
    position: relative;
    top: 80px;
    line-height: 12em;
    border-radius: 200px;
    margin: 0 10px 0 10px;
    overflow: hidden;
}

#logo:hover {
  border: 2px solid cyan;
}
<div id=logo></div>

Greetings, TheWombatGuru

htmlcsshoverborder


Solution 1:[1]

box-sizing: border-box doesn't really make the 'circle' render correctly with the border in this case - although it is an amazing property. If it were me, I'd change your css to the following:

#logo:hover {
border-left: 3px solid cyan;
border-right: 3px solid cyan;
padding: 0;
margin: 0 6px 0 6px;
}

and adjust your #logo class margins to 

{margin: 0 9px 0 9px;}

a little 'hackier', but I prefer the behaviour

Solution 2:[2]

You may add:

* {  box-sizing: border-box;}

to your css sheet or maybe just to your #logo id.

you may find more info about this (for me at least amazing propertie ) here

(and just in case... the code marked applied the property to every html element in your web, which is exactly what I have been doing in my last many projects with absolutely no regret)

Solution 3:[3]

You should try adding this to your #logo :

border: 2px solid transparent;

which would make :

#logo {
width: 200px;
height: 200px;
position: relative;
top: 80px;
line-height: 12em;
border-radius: 200px;
margin: 0 10px 0 10px;
overflow: hidden;
border : 2px solid transparent;
}

Or using box-sizing: border-box

Hopes it helps !

Cheers !

Solution 4:[4]

You also can use box shadow:

 #logo{
    box-shadow: inset 0 0 0 1px cyan;
 }

 #logo:hover {
    box-shadow: inset 0 0 0 2px cyan;
 }

Solution 5:[5]

You should add box-sizing: border-box to the pertinent element in your CSS. This will put the padding inside the width of the container.

Here is a codepen to demonstrate: http://codepen.io/himmel/pen/LVPPvg

Solution 6:[6]

Alternatively to box-sizing: border-box; you could also use the calc function to subtract a value.

#logo:hover {
    width: calc(200px - 4px);
    height: calc(200px - 4px);
    border: 2px solid cyan;
}

This method might be helpful when you are dealing with percentages, anyway it's a cool trick i situations like this.

Solution 7:[7]

Try adding border:1px solid transparent; to non hover element.

Solution 8:[8]

Try using position: absolute; because elements with position absolute have no effect on other elements. Make sure that the parent element has a position relative. For example

` #parent-element { position:relative;

}

#logo { position:absolute; }`

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 AnnieMac
Solution 2 Alvaro Menéndez
Solution 3 0x01
Solution 4 Ursu Alexandr
Solution 5 Himmel
Solution 6 waxs
Solution 7 Nithyashree S K
Solution 8 Kevin Caster

Related Questions