@ -1562,7 +1562,7 @@ The `<svelte:options>` element provides a place to specify per-component compile
### `<svelte:fragment>`
### `<svelte:fragment>`
The `<svelte:fragment>` element allows you to place content in a named [docs](docs#slot_name) without wrapping it in a container. This keeps the flow layout of your document intact.
The `<svelte:fragment>` element allows you to place content in a named [docs](docs#slot_name) without wrapping it in a container DOM element. This keeps the flow layout of your document intact.
The `<svelte:fragment>` element allows you to add content to a named slot without breaking the document's flow layout.
The `<svelte:fragment>` element allows you to place content in a named slot without wrapping it in a container DOM element. This keeps the flow layout of your document intact.
In the example notice how we applied a flex layout with a gap of 2em to the box.
In the example notice how we applied a flex layout with a gap of `1em` to the box.
```sv
```sv
<!-- Box.svelte -->
<!-- Box.svelte -->
<style>
<style>
.box {
.box {
width: 300px;
border: 1px solid #aaa;
border-radius: 2px;
box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
padding: 1em;
margin: 0 0 1em 0;
display: flex;
display: flex;
flex-direction: column;
flex-direction: column;
gap: 1em;
gap: 1em;
@ -32,7 +25,7 @@ In the example notice how we applied a flex layout with a gap of 2em to the box.
However, the content in the footer is not spaced out according to this rhythm because wrapping it in a div created a new flow layout.
However, the content in the footer is not spaced out according to this rhythm because wrapping it in a div created a new flow layout.
We can solve this by changing `<div slot="footer">` in the `App` component:
We can solve this by changing `<div slot="footer">` in the `App` component. Replace the `<div>` with `<svelte:fragment>`: