Python Dash开发：为div添加header后布局破坏问题求助

问题原因 #

你添加H1标签后布局错位由两个常见的HTML/CSS默认规则导致：

1. 三个并排的内容卡片用了display: inline-block属性，该属性默认的垂直对齐规则是按文本基线对齐，第一个卡片添加文本内容后基线位置发生变化，其余两个空卡片会跟随新的基线错位排列。
2. 原生H1标签自带默认上下边距，会撑开外层你设置了固定高度5vh的深蓝色容器，进一步放大布局偏差。

解决方法 #

只需要新增两行CSS配置即可修复：

• 给三个设置了display: inline-block的卡片样式，都新增"vertical-align": "top"属性，强制三个卡片统一靠顶部对齐：

# 第一个39vw宽的卡片，以及后续两个26vw宽的卡片的style都加这行
style={
    "background-color": "#74B6CE",
    "height": "88vh",
    "width": "39vw",
    "margin-left": "1vw",
    "display": "inline-block",
    "vertical-align": "top"  # 新增行
}

• 给你新增的PIPELINE标题的H1样式新增"margin": 0属性，消除默认边距：

html.H1(
    children="PIPELINE",
    className="title_1",
    style={
        "color": "white",
        "text-align": "center",
        "margin": 0  # 新增行
    },
),

修改完成后即可恢复你最初的布局效果。

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