Basic question about text formatting

[wvhulle]

I'm sorry for this basic question about Carbon Design, but I couldn't find any info on it.

When I use the standard HTML tags such as h1 and p, there is no padding between the elements. But in the example vercel site there's nice padding everywhere. How is this accomplished without editing too much css? I come from Tailwind and would like to have a simple way to set styles. Is the only way to wrap everything inside <Grid>, <Row> and <Column>?

[metonym]

The documentation site uses CSS variables and taps into Carbon's layout tokens for margin/padding.

If you are using CSS variables, you can write the following:

h1 {
  margin-bottom: var(--cds-spacing-06);
}

Other examples in the docs site: https://github.com/carbon-design-system/carbon-components-svelte/blob/3cadf2c00132ef4dbcdd5e7eb8e6de5f02387991/docs/src/layouts/ComponentLayout.svelte#L176

If you are not using CSS variables, you will need to use SCSS or manually hardcode the spacing values.

[stsdc]

More info about spacings: https://www.carbondesignsystem.com/guidelines/spacing/overview/

Honestly I thought, that those variables are coming with a theme and are already applied to basic components. If that's intended, than would be nice to display some infobox :sweat_smile:

BTW thanks for the docs, a lot of examples, easy to read and apply :rocket: