HTML、CSS问题：点击后阻止.accordion_button元素上移

问题根源 #

手风琴按钮点击后偏移的核心原因是.accordion_button设置了display: inline-block——行内块元素默认垂直对齐方式为baseline，当下方.accordion_content从display: none变为display: block时，会改变按钮的垂直对齐基准，导致按钮向上移动。

修复方案 #

只需做两处关键修改：

• 将.accordion_button的display: inline-block改为display: block，让按钮以块级元素占据整行，彻底消除行内元素的对齐问题。
• 给.accordion_content添加背景色和内边距，完善样式的同时避免内容显示时的布局跳动。

修改后的完整CSS代码 #

: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;
  /* 替换为block消除行内对齐问题 */
  display: 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;
  /* 添加背景色和内边距优化样式与布局 */
  background-color: #fff;
  padding: 1em;
}

.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);
}

效果说明 #

• display: block让按钮成为块级元素，不再受行内元素对齐规则影响，点击后位置完全固定。
• 给.accordion_content添加背景色和内边距，既让内容区域样式更协调，也避免了内容显示时因无内边距导致的布局微小跳动。

内容的提问来源于stack exchange，提问作者Delfon