User Guide Cancel

Add padding to content blocks and components in Adobe Captivate

Last updated on 26 September 2024

Captivate User Guide
Introduction to Captivate
1. What's New in Adobe Captivate
2. Adobe Captivate System Requirements
3. Adobe Captivate Updates
4. Download Adobe Captivate
5. Frequently Asked Questions
Add a slide
1. Slide navigator in Adobe Captivate
2. Add a conversation slide
3. Add characters to your Adobe Captivate project
4. Edit the background image on a slide
5. Add padding to content blocks and components
6. Create a long scroll project
Add text blocks
1. Add text to a project
Add media blocks
1. Add images to a project
2. Add videos to a project
3. Add quotes
4. Add SVGs to a project
Interactive components
1. Add a button
2. Add an input field
3. Add a radio button group
4. Add a dropdown
5. Add a checkbox
Widgets
1. Add a Card
2. Add Tabs
3. Add a Certificate
4. Add a Carousel
5. Add a Hotspot
6. Add Drag-and-Drop
7. Add a Timeline
8. Add Click to Reveal
Create quizzes
1. Add a Multiple-choice question
2. Add a True or false question
3. Add a Match the column question
4. Add a Short answer question
5. Add a Sequence question
6. Add question pools and random question slides
7. Import questions as CSV
Add audio to a project
1. Add audio
Interactions
1. Add interactions to a project
2. Create interactive video with overlay
3. Create a slide-level interaction
4. Create an object-level interaction
Animations
1. Add animations to a project
Accessibility
1. Make a project accessible
Customize the timeline
1. Timeline panel in Adobe Captivate
Customize TOC and Playbar
1. Table of Contents in Adobe Captivate
Edit project properties
1. Variables in Adobe Captivate
2. Preferences
3. Project dimensions
4. Themes
Create a simulation project
1. Simulation
Preview a project
1. Preview
Share a project for review
1. Share for review
Publish a project
1. Publish your project
Upgrade projects in Adobe Captivate
1. Upgrade projects to the latest version

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
Component level padding
Examples of padding for different components
Auto layouts

Content block padding

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

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

Content block padding
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.
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.

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.

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

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.

Examples of padding for different components

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

Add padding to any text block, creating space between the content and its boundaries. For each text component (title, subtitle, or body text), use the pink handles to drag and introduce padding directly on the canvas. Alternatively, select the text component and enter the padding values in the Alignment and Spacing section under Visual Properties.

The example demonstrates how to add padding to a multi-column text block within the body component, specifically by applying 100px padding at the bottom.

Select the image and drag the pink handles located near the image's borders. Alternatively, you can enter padding values in the Alignment and Spacing section of the Visual properties menu.

The example demonstrates a bottom padding of 60 pixels from the boundary of an image container:

Add padding to images in an image grid, within widgets, cards, characters, and images in question slides, but you cannot add padding to background images.

This is an example of adding padding within an interactive button component. Add a button component and select the button inside its content block. Use the pink handles to drag and add spacing or input the padding values in the Alignment and Spacing section.

Note:

The Radio Group and Dropdown interactive components do not support padding.

Add padding to any component within a widget, such as text for headings, subtitles, images, cards, and icons. In this example of a flipcard widget, you can select any component within the widget and use the pink handles to adjust padding.

Or select a component and add padding from Alignment and Spacing under Visual properties. In this example, padding of 30px is added to the flip icon inside the card. Similarly, you can select any text or image within each card and add padding to its boundaries.

Incorporate padding into all components on question slides, including text, images, and interactive buttons. Adding space between the options on question slides facilitates easier selection and enhances the question's overall aesthetic. This is an example of a multiple-choice question with padding inside the image options.

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

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):