如何设置Plotly Dash边框样式以避免边框重叠？

问题原因分析 #

从你的代码来看，边框重叠大概率由以下两个原因导致：

1. 盒模型计算逻辑：默认box-sizing: content-box会让元素的边框、padding额外占用宽度，导致内部元素（如上传组件、Tabs容器）总宽度超出外层容器，进而和外层边框重叠。
2. 外部样式表默认样式冲突：你引入的bWLwgP.css可能给dcc.Tabs或内部元素添加了默认边框、margin/padding，和自定义边框规则产生冲突。

具体解决方案 #

方案1：全局设置盒模型为border-box

这是最通用的解决方式，确保所有元素的边框和padding都包含在设定宽度内，不会额外占用空间。
在assets文件夹下创建style.css，添加以下代码：

* {
  box-sizing: border-box;
}

/* 给各区块添加间距，避免元素紧贴边框 */
.upload-section {
  margin-bottom: 20px;
}

.action-buttons {
  margin-bottom: 20px;
}

方案2：调整内联样式解决宽度溢出

如果不想修改全局样式，可直接调整内部元素的宽度计算：
修改dcc.Tabs的style属性，将固定宽度改为基于外层容器的计算值：

dcc.Tabs([
    # Tab内容保持不变
],
style={'margin': 'auto', 'width': 'calc(100% - 40px)'}  # 减去外层容器的左右padding（20px*2）
)

同时给上传组件的外层容器添加margin，避免和外层边框紧贴：

html.Div([
    # Upload组件内容保持不变
], className='upload-section', style={'margin-bottom': '20px'})

方案3：移除冲突的默认边框

如果是外部样式表给Tabs添加了默认边框，可强制覆盖：
在assets/style.css中添加：

.tabs {
  border: none !important;
}

.tab-content {
  border: none !important;
}

修改后的完整代码示例（方案1+方案2结合） #

import dash
from dash import dcc, html, dash_table, Input, Output, State

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets, suppress_callback_exceptions=True)

app.layout = html.Div([
    dcc.Tabs([
        dcc.Tab(label="Analyzer", children=[
            html.Div([
                dcc.Upload(
                    id='upload-data',
                    children=html.Div([
                        'Drag and Drop or ',
                        html.A('Select Files')
                    ]),
                    style={
                        'width': '100%',
                        'height': '60px',
                        'lineHeight': '60px',
                        'border': '2px dashed #aaaaaa',
                        'border-radius': '20px',
                        'text-align': 'center',
                        'padding': '10px',
                        'margin': '0 auto',
                        'display': 'block'
                    },
                    multiple=True
                ),
            ], className='upload-section', style={'margin-bottom': '20px'}),

            html.Div([
                html.Button(
                    'Analyze',
                    id='process-button',
                    n_clicks=0,
                    className='action-button',
                    style={
                        'background-color': '#0074D9',
                        'color': 'white',
                        'margin': '0 10px'
                    }
                ),
                html.Button(
                    'Remove Uploaded Files',
                    id='remove-files-button',
                    n_clicks=0,
                    className='action-button',
                    style={
                        'background-color': '#FF4136',
                        'color': 'white',
                        'margin': '0 10px'
                    }
                ),
            ], className='action-buttons', style={'text-align': 'center', 'margin': '0 auto', 'padding': '10px', 'margin-bottom': '20px'}),

            html.Div(id='output-data-upload')
        ]),
    ],
    style={'margin': 'auto', 'width': 'calc(100% - 40px)'}
    )
], style={'border': '2px solid #aaaaaa', 'border-radius': '20px', 'margin': '10%', 'padding': '20px'})

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

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