How to give space between two dcc components in Python Dash?

python plotly plotly-dash plotly-python

jsonbourne · Apr 15, 2020 · Viewed 7.3k times · Source

What is the HTML equivalent for &nbsp (space) in Dash?

html.Div(
    [
      dcc.Input(),
      <add horizontal space here> 
      dcc.Input()
    ]
)

Answer

If you want to add some space between components you can simply use CSS-properties for this:

html.Div(
    [
      dcc.Input(),
      dcc.Input(style={"margin-left": "15px"})
    ]
)

This adds a margin to the left of your second Input.

Have a look at the layout-section in the Plotly Dash documentation and CSS documentation about margin: