# PaddingReset

Re-applies the article's horizontal padding to content inside a fluid, full-width Block so captions stay aligned to the text gutter.

**Category:** Components/Page layout/PaddingReset

**Import:** `import { PaddingReset } from '@reuters-graphics/graphics-components'`

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|:--------:|-------------|
| `containerIsFluid` | `boolean` | `true` |  | Set to `true` if the parent container is fluid. |
| `children` | `Snippet` | — | ✓ | Content to be padded. |

## Examples

### Demo

```svelte
<!-- Fluid block -->
<Block {width}>
  <img src={sharkSrc} alt="shark" class="fmb-1" />
  <PaddingReset containerIsFluid={width === 'fluid' ? true : false}>
    <div class="body-note">
      A caption for the image that is padded when its containing <code
        >Block</code
      > is fluid.
    </div>
  </PaddingReset>
</Block>
```

## Documentation

# PaddingReset

Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep padding on adjacent text such as notes or captions. The `PaddingReset` component resets our normal well padding inside a `fluid` container.

```svelte
<script>
  import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
</script>

<Block width="fluid">
  <!-- Edge-to-edge image -->
  <img src="https:..." alt="Alt text" class="fmb-1" />

  <!-- Wrap text in `PaddingReset`to add padding back in -->
  <PaddingReset>
    <div class="body-note">
      A caption for the image that is padded when Block is fluid.
    </div>
  </PaddingReset>
</Block>
```

## Conditional padding

You can add the padding conditionally by setting the `containerIsFluid` prop to `true` when the `Block` width is `fluid`, which is what many other components in this library do.

```svelte
<script>
  import { Block, PaddingReset } from '@reuters-graphics/graphics-components';

  let { src = 'https://...', width = 'fluid' } = $props();
</script>

<Block {width}>
  <!-- Edge-to-edge image -->
  <img src="https:..." alt="Alt text" class="fmb-1" />

  <!-- Set conditional padding with the `containerIsFluid` prop -->
  <PaddingReset containerIsFluid={width === 'fluid'}>
    <div class="body-note">
      A caption for the image that is padded when Block is fluid.
    </div>
  </PaddingReset>
</Block>
```