如何为带边框容器内的按钮添加间距？<br>标签无效

我想给带边框的容器container2里的按钮添加间距，但用<br>或</br>标签完全没效果。

我的HTML代码如下：

<div class="container2">
    <button class="accordion">What is an alumni website?</button>
    <div class="panel">
        <p1>An alumni website is a platform designed for graduates of a specific educational institution to connect and engage with one another. It provides a space for alumni to stay in touch, share news, and participate in events and programs organized by the institution.</p1>
    </div>
    <button class="accordion">Who can access an alumni website?</button>
    <div class="panel">
        <p1>Typically, alumni websites are only accessible to graduates of the specific educational institution. In some cases, access may also be granted to current students, faculty members, and staff of the institution.</p1>
    </div>
    <button class="accordion">What are the benefits of joining an alumni website?</button>
    <div class="panel">
        <p1>Joining an alumni website can provide a range of benefits, including the ability to network with other graduates, stay informed about news and events related to the institution, access career resources and job postings, and participate in mentoring or volunteer programs.</p1>
    </div>
</div>

当前效果截图：

解决方案 #

别用<br>标签，这不是控制元素间距的正确方式，用CSS实现才是标准做法，给你几种简单有效的方法：

方法1：给按钮添加margin间距

直接给.accordion按钮设置上下外边距，让每个按钮和上下元素产生间距：

.accordion {
    margin: 10px 0; /* 上下各10px间距，左右无间距 */
}

如果想让按钮和下方的.panel也保持间距，可给.panel加底部外边距：

.panel {
    margin-bottom: 10px;
}

方法2：给容器使用Flex布局并设置gap

给container2设置垂直Flex布局，用gap属性统一控制所有子元素的间距，这种方式更简洁：

.container2 {
    display: flex;
    flex-direction: column; /* 垂直排列子元素 */
    gap: 15px; /* 所有子元素之间统一间距为15px */
}

无需给单个元素加margin，容器会自动管理按钮和面板之间的距离。

方法3：精准控制按钮上方间距

如果只想让第二个及以后的按钮和前方面板产生间距，可用兄弟选择器：

.panel + .accordion {
    margin-top: 10px;
}

只会给紧跟在.panel后面的.accordion添加上边距，精准控制间距位置。

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