Spacing

Spacing in Canvas content can be controlled in two main ways: using Canvas' legacy utility classes (such as content-box and pad-box) and using modern CSS properties like margin and padding directly in inline styles.

The examples below show both approaches. The Canvas classes come from an older style guide and may change in future, whereas the inline style examples use standard CSS that will be familiar from modern web development.

Useful references

• MDN: padding
• MDN: margin
• MDN: border
• MDN: border-radius

Content boxes (Canvas legacy classes)

The content-box class adds padding inside an element, making blocks of content easier to read. In the example below, two boxes use content-box together with Canvas border classes to show the spacing clearly.

<div class="content-box border border-trbl">
  First content box using <code>content-box</code>.
</div>
<div class="content-box border border-trbl">
  Second content box with the same class and spacing.
</div>

Padding utilities (Canvas legacy classes)

The pad-box utilities control the amount of padding inside an element. Larger values add more space, while pad-box-microadds only a small amount. These classes are part of Canvas' legacy CSS and may not be available in future versions, but they can still be used in current content.

<div class="pad-box-mega border border-trbl">
  <strong>pad-box-mega</strong> (largest padding)
</div>

<div class="pad-box border border-trbl">
  <strong>pad-box</strong> (standard padding)
</div>

<div class="pad-box-mini border border-trbl">
  <strong>pad-box-mini</strong> (small padding)
</div>

<div class="pad-box-micro border border-trbl">
  <strong>pad-box-micro</strong> (very small padding)
</div>

Modern spacing with inline CSS

For new content, it is often clearer to control spacing using standard CSS properties directly in inline styles. This avoids relying on legacy Canvas classes and makes your content easier to understand for anyone familiar with modern CSS.

Common properties include: padding (space inside an element), margin (space outside an element), border, and border-radius (for rounded corners).

Card-style blocks with padding and margin

The example below shows three "card" blocks that use only inline styles for spacing and borders. Each card has:

• padding to space the content inside;
• margin-bottom to add space between cards;
• border and border-radius for a simple card-style appearance.

<div style="border: 1px solid #d0d7de; border-radius: 0.5rem; padding: 1rem; margin-bottom: 1rem; background: #f9fafb;">
  <h3 style="margin-top: 0; margin-bottom: 0.5rem">Card with standard padding</h3>
  <p style="margin: 0">
    This card uses <code>padding: 1rem;</code> and
    <code>margin-bottom: 1rem;</code> to create clear spacing around
    the content and between cards.
  </p>
</div>

<div style="border: 1px solid #d0d7de; border-radius: 0.5rem; padding: 0.75rem; margin-bottom: 1rem; background: #ffffff;">
  <h3 style="margin-top: 0; margin-bottom: 0.5rem">Card with slightly smaller padding</h3>
  <p style="margin: 0">
    This card uses <code>padding: 0.75rem;</code> for a slightly more compact layout.
  </p>
</div>

<div style="border: 1px solid #d0d7de; border-radius: 999px; padding: 0.75rem 1.25rem; margin-bottom: 1rem; background: #eef6ff; display: inline-block;">
  <p style="margin: 0">
    This pill-style badge uses <code>border-radius: 999px;</code> and extra horizontal padding.
  </p>
</div>

Spacing between sections

You can also control spacing between larger sections of a page using margin-top and margin-bottom. This is useful for separating headings, paragraphs, and blocks of content without relying on extra empty paragraphs or line-breaks.

<div style="border-left: 4px solid #0000cd; padding: 0.75rem 1rem; margin-top: 1.5rem; margin-bottom: 1.5rem; background: #f5f7ff;">
  <h3 style="margin-top: 0; margin-bottom: 0.5rem">Section callout</h3>
  <p style="margin: 0">
    This callout uses <code>margin-top</code> and <code>margin-bottom</code>
    on the container to create space above and below the block.
  </p>
</div>

Accessibility and limitations

• Avoid using empty paragraphs or multiple line-breaks to create space. These can be confusing for screen readers and may be rewritten by Canvas when the page is saved.
• Keep spacing consistent between related elements (such as headings and their following paragraphs) so that content is easy to scan and read.
• When using borders and backgrounds to create card-style blocks, ensure that text still has sufficient colour contrast against the background.