如何移除Python Dash Plotly应用页面body元素的默认左右边距

你遇到的边距问题来源于两个默认配置：

1. Bootstrap默认Container组件非流体模式下存在固定最大宽度，且自带左右内边距
2. 页面body元素默认存在8px的外边距

不需要引入外部CSS文件，直接通过两处修改即可解决：

• 给dbc.Container添加fluid=True参数，使其自适应占满整个视口宽度，同时在style中移除默认左右内边距
• 在布局最开头插入html.Style组件，直接编写全局样式覆盖body的默认边距

修改后的代码示例如下：

# 首先确保导入html组件
from dash import html
import dash_bootstrap_components as dbc
from jupyter_dash import JupyterDash

app = JupyterDash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP],
                meta_tags=[{'name': 'viewport',
                            'content': 'width=device-width, initial-scale=1.0'}]
                  )

app.layout = dbc.Container([              
        # 新增全局样式，直接覆盖body默认边距
        html.Style('body {margin: 0; padding: 0;}'),
        dbc.Row([qipid_selector, pura_title]),
        dbc.Row(csbm_graph_card),
        dbc.Row(sms_graph_card),
        dbc.Row(interventions_graph_card)
], 
# 开启流体容器，移除默认内边距
fluid=True,
style={
    'background':'grey',
    'padding-left': '0',
    'padding-right': '0'
})

如果还存在剩余边距，可以在html.Style中添加规则覆盖.row的默认左右负边距，避免溢出产生滚动条：

.row {margin-left: 0; margin-right: 0;}

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