The layout is a bit broken when react css hover is applied - css

Question

I want to display a border when I hover box1.
When I hover, the border is displayed, but for a moment, a black border is displayed.
Also, when I hover, the layout shifts to the bottom.
If anyone knows how to fix this, please let me know.
codesandbox
import "./styles.css";
import styled from "styled-components";
const Box = styled.div`
padding: 9px 18px;
cursor: pointer;
display: inline-block;
color: #222426;
&:hover {
border: solid #e2e6ea 1px;
transition: all 0.2s cubic-bezier(0.08, 0.52, 0.52, 1);
}
span {
cursor: pointer;
font-weight: bold;
font-size: 20px;
line-height: 20px;
color: #222426;
}
`;
const App = () => {
return (
<>
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
<Box>
<span>box1</span>
</Box>
<div>
<span>aaaaaaa</span>
</div>
<div style={{ width: "full", height: "100px", background: "red" }}></div>
</>
);
};
export default App;

Answer 1

In CSS, you can set box-sizing: border-box;
Then set your span's height then it won't shift to the bottom.
The alternative way is making a white border, and change its color when hover.

Answer 2

I found you have "transition: all 0.2s cubic-bezier(0.08, 0.52, 0.52, 1);" This actually causes the black border flicked for a second. If you remove it, the black border will be gone. However, I am not sure what effect do you want to achieve here.
If you add a border with the same background colour and same thickness inside the div i.e border: solid #fff 1px;
The div will not push other component downward anymore.