## Space  
Use the Space component to add horizontal or vertical spacing from theme.  
Category: Layout  

### Simple Example

Space component can be customized with two props: `h` and `w`, shortcuts for height and width. These can take either 
values from Mantine's theme i.e. xs, sm, md, lg, xl or number.

```python
import dash_mantine_components as dmc
from dash import html

component = html.Div(
    [
        dmc.Group([dmc.Badge("Badge 1"), dmc.Badge("Badge 2")]),
        dmc.Space(h="xl"),
        dmc.Group([dmc.Badge("Badge 1"), dmc.Space(w="lg"), dmc.Badge("Badge 2")]),
        dmc.Space(h=30),
        dmc.Group([dmc.Badge("Badge 1"), dmc.Space(w=45), dmc.Badge("Badge 2")]),
    ]
)
```
### Where to use

In most cases, you would want to use margin props instead of `Space` when working with Mantine components:

```python
import dash_mantine_components as dmc
from dash import html

html.Div([
    dmc.Text("First line"),    
    dmc.Text("Second line", mt="md"),    
])
```

But when you work with other components like `html` or `dcc`, you do not have access to Mantine's theme spacing,
and you may want to use dmc.Space component:

```python
import dash_mantine_components as dmc
from dash import html

html.Div([
    html.P("First line"),
    dmc.Space(h="md"),    
    html.P("Second line"),    
])
```


### Keyword Arguments
#### Space

- children (a list of or a singular dash component, string or number; optional)

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- className (string; optional):
    Class added to the root element, if applicable.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- tabIndex (number; optional):
    tab-index.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.