是什么导致了最外层轮廓之后的白色边框？

Question

这里有一些让我发疯的东西，请帮助我！

我在 Python 中用 Dash 编写了一些网站布局测试代码，这里是代码：

app = dash.Dash()

    app.layout = html.Div([
                           html.H2(children="Title",
                           style={'color':'lightgrey',
                                  'background-color': 'black',
                                  'margin-top': '0px',
                                  'margin-bottom': '0px',
                                  'padding-top':'12.5px',
                                  'padding-bottom':'12.5px',
                                  'padding-left':'10px',
                                  'text-align': 'center'}),
                          
                           html.Div(children=[],
    
                                    style={'widh':'50%', 
                                           'height':'50%',
                                           'border': '10px solid rgb(190, 190, 190)',
                                           'outline': '10px solid rgb(200, 255, 255)',
                                           'margin': '10px 10px 0px 10px',
                                           'padding':'0px 0px 0px 0px',
                                           'background-color': 'green',
                                           'background-size': 'auto'} )],
    
    style = {'widh':'100vw', 
             'height':'100vh',
             'border': '10px solid rgb(255, 255, 255)',
             'outline': '10px solid rgb(200, 200, 255)',
             'outline-offset': '0px',
             'margin': '0px 0px 0px 0px',
             'padding':'0px 0px 0px 0px',
             'background-color': 'lightblue',
             'background-size': 'auto'} 
    )
    
    if __name__ == '__main__':
        app.run_server(debug = True)

这给了我这个布局（不关心颜色，它只是结构测试 ^^）： Coded layout result image

我有两个问题：

最主要的是：为什么会有那个白边？第二个是：是什么导致大小 os 的页面在底部有一些额外的 space？（参见下面的参考资料：）

Second question image

Answer 1

嗯，首先，这是一个奇怪但必须遵循的 Dash rule/quirk，所有 CSS 样式参数都不包含连字符，而是，您删除连字符，然后将下一个单词大写。所以你的代码应该是这样的：

import dash
import dash_daq as daq

from dash import dcc
from dash import html
from dash import no_update

from dash.dependencies import Input
from dash.dependencies import Output


app = dash.Dash()

app.layout = html.Div(
    [
        html.H2(
            children="Title",
            style={
                "color": "lightgrey",
                "backgroundColor": "black",
                "marginTop": "0px",
                "marginBottom": "0px",
                "paddingTop": "12.5px",
                "paddingBottom": "12.5px",
                "paddingLeft": "10px",
                "textAlign": "center",
            },
        ),
        html.Div(
            children=[],
            style={
                "widh": "50%",
                "height": "50%",
                "border": "10px solid rgb(190, 190, 190)",
                "outline": "10px solid rgb(200, 255, 255)",
                "margin": "10px 10px 0px 10px",
                "padding": "0px 0px 0px 0px",
                "backgroundColor": "green",
                "backgroundSize": "auto",
            },
        ),
    ],
    style={
        "widh": "100vw",
        "height": "100vh",
        "border": "10px solid rgb(255, 255, 255)",
        "outline": "10px solid rgb(200, 200, 255)",
        "outlineOffset": "0px",
        "margin": "0px 0px 0px 0px",
        "padding": "0px 0px 0px 0px",
        "backgroundColor": "lightblue",
        "backgroundSize": "auto",
    },
)

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

您会发现滚动问题已经消失。至于白色边框，你自己用 "border": "10px solid rgb(255, 255, 255)" 设计了样式！这是否回答了您的问题？

您可以使用 chrome DevTools 直接检查元素（超级有用的必备工具），如您所见：

并且可以通过简单地从您的代码中删除它来轻松删除它，您也可以在 chrome DevTools 中通过在样式面板中取消选中它的框来预览它，如下所示：

是什么导致了最外层轮廓之后的白色边框？

What is causing that white border right after the outermost outline?

html

css

python

border

plotly-dash