User Guide Cancel

Add padding to content blocks and components in Adobe Captivate

Overview

Padding creates space between the content and its borders, enhancing the visual layout and alignment of your project. It can be applied at the level of content blocks or within components to assist in improved alignment and spacing, contributing to a better viewing experience.

Benefits of padding

  • Creates uniform spacing around elements, ensuring a clean and professional appearance. 
  • Increases space around interactive elements, making them easier to select, thus improving user experience.

When to use padding: 

  • Adjust size: If you need to create more space around an element, consider adding or increasing padding. This is particularly useful for interactive elements, where additional space can improve accessibility. 
  • Border spacing: Padding adds space between content and its border, which can help ensure better alignment with other elements on the page.

Topics on this page:

Content block padding

Add padding to an entire content block from the boundaries and see the behavior on different viewports. 

  1. Select Visual properties from the right toolbar and expand the Alignment and Spacing section to see the padding values.

    This is an image that shows how to add padding for a content block
    Content block padding

  2. Utilize the Content Width slider to modify the horizontal spacing of any content block from either the left or right side. Specify the desired percentage of spacing using the slider. As you adjust the width, the padding values will automatically update to reflect the changes.

  3. Enable Auto layout to adjust the content width proportionally across all the device viewports or turn it off to adjust them manually. Learn more about Auto layouts for different viewports. 

    If Auto layout is disabled, you can set padding values for all sides, and the content width for each viewport can be adjusted independently. This means you can add a content width for one viewport without affecting the others. 

    This is an image that shows content block padding for tablet view with Auto layout disabled
    Content block padding for tablet view with Auto layout disabled

    Note:

    Horizontal padding for content blocks is set as a percentage because the project width is fixed. Vertical padding is defined in pixels to accommodate long scrolling content.

Component level padding

Incorporate padding for each element within a content block, including images, text, interactive elements, cards, and widget objects. Padding for components within a content block can be added in two ways:

Uniform padding: add padding to all four sides simultaneously.

Non-uniform padding: add padding to each side individually. This is selected by default.

This is an image

Here is an example of uniform padding of 50px on all four sides within the text block.

This is an image

Hovering over the edges of any component shows pink handles which can be dragged to adjust spacing. For uniform padding on all sides, press and hold the Shift key while dragging the handles.

This is an image

Examples of padding for different components

Here are some examples of padding for various components in a project of dimension 1366x768px:

Auto layouts

When Auto Layout is enabled, padding is proportionally adjusted across device viewports for content blocks and components, with values responsive to desktop, tablet, and mobile devices based on the project's dimensions. Learn more on how to change project dimensions in Adobe Captivate.

Auto layout behavior when enabled

When Auto layout is enabled, padding is proportionally adjusted across different devices, automatically modifying the values for each viewport. In a project with a resolution of 1366x768px, a padding of 50px on the desktop is scaled to 28px on a tablet and 16px on mobile, preserving the aspect ratio.

This is an image that describes the desktop view when Auto layout is enabled
Desktop view when Auto layout is enabled

This is an image
Tablet view when Auto layout is enabled

This is an image
Mobile(portrait) view when Auto layout is enabled

Auto layout behavior when disabled

Here is an example when Auto layout feature is disabled for a project size of 1366 x 768px. In this case, the user can manually add the padding values for each view port for the best viewing experience.

Desktop view (padding 50px): 

Auto layout disabled for Desktop view (padding: 50px)

Tablet view (Padding manually changed to 10px while keeping Auto layout disabled): 

This is an image

Mobile view (Padding manually changed to 20px): 

This is an image

Get help faster and easier

New user?