如何为W3school手风琴组件的展开区域添加上下内边距？

问题根源：原代码中.panel的max-height: 0仅会隐藏内部内容，但元素自身的上下padding属于盒模型的一部分，即使max-height为0，padding的高度仍会显示，导致手风琴未展开时出现异常空白。

解决方案1：给.panel内部添加容器承载上下内边距 #

保留.panel的左右padding，将上下内边距转移到内部新增的容器上：

1. 修改HTML结构，在.panel内新增一个容器：

<div class="panel">
  <div class="panel-inner">
    <!-- 手风琴展开后的原内容 -->
  </div>
</div>

2. 调整CSS样式：

.panel {
  padding: 0 18px; /* 仅保留左右内边距 */
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.panel-inner {
  padding: 15px 0; /* 设置需要的上下内边距，数值可自定义 */
}

解决方案2：给内容元素设置上下外边距 #

如果不想新增HTML结构，可直接给.panel内的内容元素设置上下margin：

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
/* 假设内容是p标签，根据实际使用的标签调整选择器 */
.panel p {
  margin: 15px 0;
}

两种方案都能实现展开区域有上下内边距，同时保证未展开时面板完全收起无异常空白。

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