破折号显示卡片边框和卡片标题之间的空白答案

【问题标题】：Dash shows whitespace between card-border and card-header破折号显示卡片边框和卡片标题之间的空白
【发布时间】：2021-10-19 03:21:52
【问题描述】：

在我的 Dash 应用程序中，我遇到了引导卡的问题。在下面的示例中，我有一个使用 Flatly 样式表的应用程序，它只包含一张卡片。

import dash
import dash_bootstrap_components as dbc

app = dash.Dash(__name__,external_stylesheets=[dbc.themes.FLATLY])

app.layout = dbc.Card([dbc.CardHeader('Test',style={'background':'red'}),dbc.CardBody('blabla')],style={'border-color':'green'})

if __name__ == "__main__":    
    app.run_server(debug=True)

当我运行这个应用程序（在命令行中使用 python app.py）时，卡片最初会按预期呈现。然而，当我放大时，标题和边框之间似乎有空间（当我进一步放大时，它又消失了）。下图显示了在左侧和右侧预期的布局，但在中间的卡片边框和页眉之间有可见的空白。到目前为止，我尝试过的所有浏览器都会出现此问题。

我的问题是：

为什么会出现这种情况？
我该如何解决这个问题？

【问题讨论】：

标签： python css bootstrap-4 plotly-dash

【解决方案1】：

我没有明确解释为什么会发生这种行为，但我确实有一个你可以使用的解决方法。

您可以使用outline 代替边框。使用轮廓代替边框可以解决问题，因为：

轮廓从不占用空间，因为它们是在元素内容之外绘制的。

import dash
import dash_bootstrap_components as dbc

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.FLATLY])

app.layout = dbc.Card(
    [
        dbc.CardHeader("Test", style={"background": "red"}),
        dbc.CardBody("blabla"),
    ],
    style={"border": "none", "outline": "solid green"},
)

if __name__ == "__main__":
    app.run_server(debug=True)

【讨论】：