```javascript
<div style={{ padding: '30px' }}>
  <H2>Heading 2</H2>
</div>
```

Headings have customized margins to ensure that adjacent elements align against the cap line and baseline of the upper and lower lines of text.

Supply the `spacing` prop to adjust the margin according to our preset spacing values, or a custom CSS value of your choice (like `auto`).

```javascript
<div style={{ width: '240px' }}>
  <div style={{ background: 'rgba(255, 0, 0, 0.25)', height: '1px', width: '240px' }} />
  <H2 spacing="0">
    Multi-line Heading to test Line Height
  </H2>
  <div style={{ background: 'rgba(255, 0, 0, 0.25)', height: '1px', width: '240px' }} />
    <div style={{ borderBottom: '1px dashed rgba(0, 0, 255, 0.25)', height: '1px', width: '240px', position: 'relative', top: '30px' }} />
  <H2 spacing="lg">
    Heading with Spacing Applied
  </H2>
  <div style={{ borderBottom: '1px dashed rgba(0, 0, 255, 0.25)', height: '1px', width: '240px', position: 'relative', bottom: '30px' }} />
  <div style={{ background: 'rgba(255, 0, 0, 0.25)', height: '1px', width: '240px' }} />
</div>
```
