如何删除破折号 dbc 项目之间的空格？答案

【问题标题】：How to remove whitespace between dash dbc items?如何删除破折号 dbc 项目之间的空格？
【发布时间】：2022-01-01 18:23:05
【问题描述】：

我已经在仪表板上工作了一段时间，但无法删除一个 dbc.Row 元素（包含两列）和下一个 dcc.markdown 元素之间的一大块空白。如果你看下面的图片（缩小比例看起来有点滑稽），你会看到我似乎无法删除的巨大空白。

我已经尝试了各种方法来摆脱它，包括以下属性的组合style={'margin-bottom': '1em'}, className="h-5", no_gutters=True，但似乎没有任何效果。是否有可能，Dash 正在应用某种我不知道的分页符？

我的代码如下：

    dbc.Row([dbc.Col(dcc.Graph(id='table1', figure=
                go.Figure(data=[go.Table(header=dict(values=['Accumulated Performance','(gross, in %)']),
                        cells=dict(values=[a, b]))],
                        layout=go.Layout(margin={'t': 25, 'b': 5, 'l': 10, 'r': 25}
                        )))
                             ),
                     dbc.Col(dcc.Graph(id='table2', figure=
                        go.Figure(data=[go.Table(header=dict(values=['Selected Risk Metrics', '']),
                        cells=dict(values=[['Sharpe Ratio 1-y','Volatility 1-y','Information Ratio 1-y',
                                            'Max 1-m drawdown (since inception)'],
                                           ['Value', 'Value', 'Value', 'Value']]))],
                        layout=go.Layout(margin={'t': 25, 'b': 5, 'l': 10, 'r': 25},
                        )))
                             )
                     ], style={'margin-bottom': '1em'}, className="h-5", no_gutters=True),

            dcc.Markdown('''
            #### Investment Philosophy
            
            Include some text describing my investment philosophy.  
            '''),

            dcc.Graph(id='indexed_return_graph')

【问题讨论】：

也许您将样式应用于错误的组件。您可以使用 chrome 元素来找出空白属于仪表板组件的哪一部分。然后将样式参数应用于该组件。

标签： python plotly plotly-dash plotly-python

【解决方案1】：

我需要为代码 style={'height': '175px'} 为两列中的每一列添加一个样式参数。

dbc.Row([
        dbc.Col(dcc.Graph(id='table1', figure=
            go.Figure(data=[go.Table(header=dict(values=['Accumulated Performance','(gross, in %)']),
            cells=dict(values=[a, b]))],
            layout=go.Layout(margin={'t': 5, 'b': 0, 'l': 10, 'r': 0, 'pad':10}
            )), style={'height': '175px'})),
        
        dbc.Col(dcc.Graph(id='table2', figure=
            go.Figure(data=[go.Table(header=dict(values=['Selected Risk Metrics', '']),
            cells=dict(values=[['Sharpe Ratio 1-y','Volatility 1-y','Information Ratio 1-y',
            'Max 1-m drawdown (since inception)'],
            ['Value', 'Value', 'Value', 'Value']]))],
            layout=go.Layout(margin={'t': 5, 'b': 0, 'l': 10, 'r': 0, 'pad':10}
            )), style={'height': '175px'}))
         ])

【讨论】：