Python Dash网页布局最外层outline后白边及底部留白问题咨询

问题原因及解决方案 #

1. 最外层outline外白色边框问题

该问题由浏览器默认样式导致：所有主流浏览器都会给body元素默认设置margin: 8px的外边距，你最外层Div的outline绘制在自身边框外侧，再往外就是body元素的区域，其默认背景为白色，就形成了你看到的白色边框。

解决方法：在布局最开头插入样式标签重置body默认样式即可，代码如下：

html.Style('body{margin:0;padding:0;box-sizing:border-box}')

2. 页面底部额外留白问题

存在两个核心诱因：

• 属性拼写错误导致尺寸规则不生效：你代码里两处把宽度属性width拼写成了widh，一处是最外层Div的style配置，一处是内部绿色Div的style配置，属性名错误会导致浏览器直接忽略该规则，布局尺寸计算出现偏差。
• 默认盒模型规则导致高度溢出：默认CSS盒模型为content-box，你给最外层Div设置了height: 100vh，同时上下各有10px的border，总高度就变成了100vh + 20px，超出视口高度，就会出现滚动条，底部露出多余的空白区域。前面重置样式里的box-sizing:border-box规则可以解决这个问题，开启后元素的border、padding都会算在你设置的宽高内部，不会额外撑大元素尺寸。

修正后可直接运行的完整代码 #

import dash
from dash import html

app = dash.Dash()

app.layout = html.Div([
    # 全局样式重置
    html.Style('body{margin:0;padding:0;box-sizing:border-box}'),
    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={'width':'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 = {'width':'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)

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