如何减小Streamlit中多个按钮之间的间距？

方案1：利用Streamlit内置列间距参数（推荐，适用于Streamlit 1.18+） #

Streamlit 1.18版本后，st.columns()新增了gap参数，可直接设置列之间的间距，无需额外空列，响应性表现更优。

import streamlit as st

b = st.container()
# 可设置"small"/"medium"/"large"，或自定义CSS单位如"0.2rem"
col1, col2, col3, col4 = b.columns([1,1,1,1], gap="small")
with col1:
   st.button("first")
with col2:
   st.button("prev")
with col3:
    st.button("next")
with col4:
    st.button("last")

方案2：自定义CSS精细控制间距 #

通过注入自定义CSS，修改列的内边距和按钮的外边距，实现更灵活的间距调整：

import streamlit as st

# 注入自定义样式
st.markdown("""
<style>
/* 缩小列的左右内边距 */
.stColumn {
    padding-right: 0.3rem;
    padding-left: 0.3rem;
}
/* 移除按钮默认外边距 */
.stButton>button {
    margin: 0;
}
</style>
""", unsafe_allow_html=True)

b = st.container()
col1, col2, col3, col4 = b.columns([1,1,1,1])
with col1:
   st.button("first")
with col2:
   st.button("prev")
with col3:
    st.button("next")
with col4:
    st.button("last")

若需要更精准的局部调整，还可以给目标按钮或列添加自定义类，针对性修改样式。

方案3：无需列布局，直接让按钮并排显示 #

通过CSS将按钮设置为行内块元素，直接在同一容器内并排，省去列布局的限制：

import streamlit as st

st.markdown("""
<style>
/* 让按钮行内显示并设置间距 */
.stButton {
    display: inline-block;
    margin-right: 0.4rem;
}
/* 可选：统一按钮宽度 */
.stButton>button {
    width: 80px;
}
</style>
""", unsafe_allow_html=True)

b = st.container()
with b:
    st.button("first", use_container_width=False)
    st.button("prev", use_container_width=False)
    st.button("next", use_container_width=False)
    st.button("last", use_container_width=False)

此方案适合需要紧凑排列按钮的场景，按钮宽度也可通过CSS统一设置。

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