破折号显示 card-border 和 card-header 之间的空格

Question

在我的 Dash 应用程序中，我遇到了 bootstrap 卡片的问题。在下面的示例中，我有一个使用 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）时，卡片最初按预期呈现。然而，当我放大时，header 和边框之间似乎有 space（当我进一步放大时，它再次消失）。下图显示了预期布局的左侧和右侧，但中间在卡片边框和 header 之间可见白色 space。目前我试过的所有浏览器都会出现这个问题。

我的问题是：

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

Answer 1

对于为什么会出现这种行为，我没有一个明确的解释，但我确实有一个您可以使用的解决方法。

您可以使用 outline 而不是边框。使用轮廓而不是边框可以解决问题，因为：

Outlines never take up space, as they are drawn outside of an element's content.

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)

破折号显示 card-border 和 card-header 之间的空格

Dash shows whitespace between card-border and card-header

css

python

bootstrap-4

plotly-dash