Css hover creates border but promotes content

Question

Situation

I am currently creating a website and want some elements to create a border / outline when you mouse over them. It is simple enough to do the job. For reference, please go to the staging site link to the Stagin area . I use the net part of the last boot machine and the box size model.

Problem

I find that when steaming, content below what hangs is “pushed” far below the next element. Using the stagin area as a link, I can change the behavior using CSS to fix this on the left or right side, but not at the same time.

code

Here is the CSS snippet that I use to create the effect:

.hover-border:hover { border: 3px solid #3A3A3A; display: block; } 

Using this method, nothing but the first element behaves as expected. If I try the following snippet, the first element will work, but the rest will break:

 .hover-border:hover { border: 3px solid #3A3A3A; display: block; margin-top: -6px; } 

For clarification regarding the properties inherited, I set the margin / padding for the items in question to "0! Important" for standard behavior, while hover

Problem

How can I block an item below?

Answer 1

Personally - I go with something along the lines of:

 .hover-border { border: 3px solid transparent; display: block; } .hover-border:hover { border: 3px solid #3A3A3A; } 

Answer 2

Try it. It will work.

 .hover-border { border: 3px solid transparent; display: block; } .hover-border:hover{ border: 3px solid #3a3a3a; } 

or

 a.no-decoration, a.no-decoration img { border: medium none; color: inherit; cursor: pointer; outline: medium none; text-decoration: none; display: block; /*Added*/ border: 3px solid transparent; /*Added*/ } 

Answer 3

The best solution to these problems is to use the box-size property: border box

 * {box-sizing:border-box;} 

Then the elements save any size that you define, but now it will INCLUDE borders and margins.

Answer 4

Borders are difficult to work when calibration is important. I was much better off using box-shadow, which just changes the background, so it doesn't require any size.

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow?v=a