破折號顯示卡片邊框和卡片標題之間的空白

Question

在我的 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），卡片最初按預期呈現。 然而，當我放大時，標題和邊框之間似乎有空間（當我進一步放大時，它又消失了）。 下圖顯示了左側和右側的預期布局，但在中間，卡片邊框和標題之間有可見的空白區域。 到目前為止，我嘗試過的所有瀏覽器中都會出現此問題。

我的問題是：

• 為什么會出現這種行為？
• 我怎樣才能解決這個問題？

Answer 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)