我正在try 创建一个手风琴组件，但我遇到了一个问题.
问题是，.accordion_button元素在被点击后会向上移动.我想把它留在原地.
我怎么才能修好它呢？我试图删除.accordion_button元素的填充，我更改了几次显示类型，但仍然不起作用.
:root{
--checked_color: #d3d3d3;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 16px;
}
body{
font-family: 'Roboto', sans-serif;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container{
width: 400px;
}
input[type="checkbox"]{
display: none;
}
.accordion_button{
text-justify: justify;
text-align: center;
width: 100%;
position: relative;
cursor: pointer;
display: inline-block;
padding: 1em 4em;
background-color: #3e3ec3;
border-radius: 12px 12px 0 0;
color: #fff;
}
.accordion_button > svg{
position: absolute;
right: 5px;
color: #fff;
height: 20px;
transition: transform .5s ease;
}
input[type="checkbox"]:checked + .accordion_button > svg{
transform: rotate(90deg);
stroke: var(--checked_color);
}
input[type="checkbox"]:checked + .accordion_button{
color: var(--checked_color);
}
.accordion_content{
display: none;
}
.accordion_content > h1{
text-align: center;
font-size: 1rem;
padding: .2em;
}
input[type="checkbox"]:checked ~ .accordion_content{
display: block;
border-radius: 0 0 12px 12px;
}
.accordion_button,.accordion_content {
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.335);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<input type="checkbox" id="accordion">
<label for="accordion" class="accordion_button">
<span>ITEM 1</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</label>
<div class="accordion_content">
<h1>Hello</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla harum maiores aperiam quo natus? Distinctio vitae officiis, maxime dolore nesciunt doloremque enim possimus unde nostrum eveniet! Ducimus unde nulla eos!</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>