如何移除Streamlit应用标题上方的多余空白？

嘿，这个问题我之前折腾Streamlit的时候也碰到过！默认布局确实会在地址栏和标题之间留一块挺显眼的空白，不过有几个实用的办法能解决它：

方法1：注入自定义CSS（最推荐） #

这是最灵活且稳定的方式，通过自定义CSS来覆盖Streamlit默认的样式。直接在你的代码开头加上这段：

import streamlit as st

# 移除顶部空白的自定义样式
st.markdown("""
    <style>
        /* 调整页面主体的顶部内边距 */
        .css-18e3th9 {
            padding-top: 0rem;
            padding-bottom: 0rem;
        }
        /* 调整侧边栏和主内容区的内边距 */
        .css-1d391kg {
            padding-top: 0rem;
        }
        /* 可选：隐藏默认的Streamlit菜单和页脚，让布局更干净 */
        #MainMenu {visibility: hidden;}
        footer {visibility: hidden;}
    </style>
""", unsafe_allow_html=True)

# 你的应用标题
st.title("我的Streamlit应用")

注意：Streamlit的CSS类名可能会随版本更新变化，如果上面的类名不生效，按F12打开浏览器开发者工具，找到顶部空白对应的元素，替换掉对应的类名就行。

方法2：直接调整标题的边距 #

如果不想全局改样式，也可以单独给标题设置负边距来拉近和顶部的距离：

import streamlit as st

# 自定义标题，通过margin-top减少顶部空白
st.markdown("<h1 style='margin-top: -40px;'>我的Streamlit应用</h1>", unsafe_allow_html=True)

这个方法简单但不够灵活，不同屏幕尺寸下可能效果不一致，适合快速测试。

小提示 #

如果用了st.set_page_config，可以搭配layout="wide"选项，再结合上面的CSS，能让布局更紧凑：

st.set_page_config(page_title="我的应用", layout="wide")

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