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()
    ]
)

Have you checked these [1](https://community.plotly.com/t/spacing-for-core-components-html/12552/3) and [2](https://community.plotly.com/t/how-to-leave-some-space-on-the-page-between-graphs-and-drop-down-menus/6234) out? — rpanai, Apr 15 '20 at 17:37

score 29 · Accepted Answer · answered Apr 16 '20 at 09:06

29

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:

answered Apr 16 '20 at 09:06

MrLeeh

1

Worked! I always thought I had to use `padding-X`, and not `margin-X`, but I was wrong! – Gustavo Louis G. Montańo May 01 '23 at 12:26

Sneha R · Answer 2 · 2022-09-13T12:31:06.457

2

Simply use html.Br() as shown below:

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

for more info, pls checkout below links:

edited Sep 13 '22 at 12:31

answered Sep 05 '22 at 06:43

Sneha R

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 09 '22 at 10:31

2 Answers2