如何减少Dash应用中地图周围的空白边距

以下是几个直接有效的修复方案，按优先级尝试：

• 强制地图组件继承容器尺寸
  如果用的是Plotly地图（dcc.Graph），必须同时设置组件样式和图表布局的边距：

  dcc.Graph(
      figure=go.Figure(
          data=[你的地图数据],
          layout=go.Layout(
              margin=dict(l=0, r=0, t=0, b=0),  # 清除图表内部边距
              height=None,  # 让高度完全继承父容器
              width=None
          )
      ),
      style={'height': '100%', 'width': '100%', 'padding': 0, 'margin': 0}
  )
  

  如果是Dash Leaflet地图，直接给dl.Map设置全尺寸样式：

  dl.Map(
      [dl.TileLayer()],
      style={'height': '100%', 'width': '100%', 'padding': 0, 'margin': 0}
  )
  

• 给父容器明确设置尺寸并清除间距
  并排布局的父容器必须有明确高度（比如90vh或者固定像素值），同时清除内边距和间距：
  用flex布局的示例：

  html.Div(
      style={
          'display': 'flex',
          'height': '90vh',  # 关键：给父容器定高
          'width': '100%',
          'padding': 0,
          'margin': 0
      },
      children=[
          html.Div(style={'width': '30%', 'padding': 0}, children=[你的表格组件]),
          html.Div(style={'width': '70%', 'padding': 0}, children=[你的地图组件])
      ]
  )
  

  用Bootstrap组件的话，记得开启no_gutters清除列间距：

  dbc.Row(
      [
          dbc.Col(你的表格组件, width=4, style={'padding': 0}),
          dbc.Col(你的地图组件, width=8, style={'padding': 0})
      ],
      no_gutters=True,
      style={'height': '90vh', 'width': '100%'}
  )
  

• 清除全局默认样式
  浏览器默认的html/body边距可能导致外层空白，在app中添加全局CSS解决：

  app.index_string = '''
  <!DOCTYPE html>
  <html>
      <head>
          {%metas%}
          <title>{%title%}</title>
          {%favicon%}
          {%css%}
          <style>
              html, body {
                  margin: 0;
                  padding: 0;
                  height: 100%;
                  width: 100%;
              }
          </style>
      </head>
      <body>
          {%app_entry%}
          <footer>
              {%config%}
              {%scripts%}
              {%renderer%}
          </footer>
      </body>
  </html>
  '''
  

• 排查组件内部额外样式
  部分地图组件的子元素（比如TileLayer）可能自带padding，检查组件文档确认是否有可配置的参数关闭默认间距。

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