How html element Leaving Space from all four side and how we can fix it

Dash Python
1

Hello friends,

I am beginner in plotly Dash I am designing Layout for my health analysis app in which i can see that my header part is leaving space from four side, how we can fix it.

import dash
import pandas as pd
import os
from dash import html
#from jupyter_dash import JupyterDash

app =dash.Dash(__name__)

app.layout = html.Div([
                        html.H1(['Health Analysis',
                                       html.Span("HM Hospital",
                                                 style={'font-family':'Sans-Serif',
                                                        'color':'Orange',
                                                        'float':'right',
                                                        'padding-right':'0.5em'

    
                                                 })
                                       ],style ={'color':'white',
                                                'backgroundColor':'Black',
                                                'padding-left':'0.5em',
                                                'box-shadow':'0px 8px 15px#00FF00',
                                                }
                    ),
                    html.Div()
])
if __name__ == '__main__':
    app.run_server()

Untitled
Untitled1936×875 16 KB

2

Hi @Harsh1 ,. Welcome

It might be that you need to reset the padding and margin for everything to 0 via CSS I think that by using bootstrap or something similar this is done by default.

* {
  padding: 0;
  margin:0;
}
3

hi @Harsh1 welocme to the forums.

Try adding this : 'margin': '0'

4

Still Its not working showing as it is

5

What you saying is that the output is the same when commenting in/out these lines?

import dash
import pandas as pd
import os
from dash import html

# from jupyter_dash import JupyterDash

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H1(['Health Analysis',
             html.Span("HM Hospital",
                       style={'font-family': 'Sans-Serif',
                              'color': 'Orange',
                              'float': 'right',
                              'padding-right': '0.5em'

                              })
             ], style={'color': 'white',
                       'backgroundColor': 'Black',
                       'padding-left': '0.5em',
                       # 'margin': 0,
                       # 'padding': 0,
                       'box-shadow': '0px 8px 15px#00FF00',
                       }
            ),
    html.Div()
])
if __name__ == '__main__':
    app.run_server(debug=True)
6

Most probably the margin / padding is on the H1…

You can easily see what is the potential problem in the dev tools

7

So, padding is going to be internal spacing inside of the element. Being the space between the edge of the element and the children.

IE a div which has a span will space out the span from the div according to the padding.

Margin is the spacing of the element from other elements at the same level.

I will point out that the app itself has padding on the body, which is what I think the issue may be.

In your css style sheet you need to set the body padding to 0.

body {
    padding: 0
}
1 Like