Search code examples
pythonplotlyplotly-dashplotly-python

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


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

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

Solution

  • 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: