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

Question

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

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

Answer 1

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:

• https://dash.plotly.com/layout
• https://www.w3schools.com/csSref/pr_margin-left.asp

Answer 2

Simply use html.Br() as shown below:

html.Div(
    [
      dcc.Input(),
      html.Br(),
      dcc.Input()
    ]
)