Basic app layout, why can I see a margin in my browser?

Dash Python
1

Hi there,

I have a pretty basic question. Lets take this example:

import dash
from dash import html

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        html.Div(
            'navbar',
            style={
                'background-color': 'red',
                'height': '10vh',
                'margin': '0',
                'padding': '0'
            },
        ),
        html.Div(
            'content1',
            style={
                'background-color': 'blue',
                'height': '40vh',
                'margin': '0',
                'padding': '0'
            },
        ),
        html.Div(
            'content2',
            style={
                'background-color': 'green',
                'height': '40vh',
                'margin': '0',
                'padding': '0'
            },
        ),
        html.Div(
            'footer',
            style={
                'background-color': 'red',
                'height': '10vh',
                'margin': '0',
                'padding': '0'
            },
        ),
    ],
)


if __name__ == "__main__":
    app.run()

If I open this in my browser, I can see a margin surrounding all Divs. By adding the following lines to my custom.css file

  * {
    margin: 0;
    padding: 0;
}

I get rid of this margin.

Could adding these lines in the css file do any harm? Is it overwriting any inline style or className style set via the css file? And why is there a margin in first place?

Thanks in advance!

2

Hi @AIMPED

Love your app design :joy:

If you inspect the browser you can see that the body has a default “user agent stylesheet” with a margin of 8px

image
image3642Ă—1176 283 KB

There is a good explanation on Mozilla Web Docs, including a way to normalize the css

2 Likes
3

Thanks a lot @AnnMarieW, I should have added more colors to it.

1 Like
4

I like it too! So colorful! :star_struck:

1 Like