- Captivate User Guide
- Introduction to Captivate
- Add a slide
- Add text blocks
- Add media blocks
- Interactive components
- Widgets
- Create quizzes
- Add audio to a project
- Interactions
- Animations
- Accessibility
- Customize the timeline
- Customize TOC and Playbar
- Edit project properties
- Create a simulation project
- Preview a project
- Share a project for review
- Publish a project
- Upgrade projects 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:
-
Select Visual properties from the right toolbar and expand the Alignment and Spacing section to see the padding values.
Content block padding 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 Content block padding for tablet view with Auto layout disabled Примечание.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.
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.
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.
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):
Tablet view (Padding manually changed to 10px while keeping Auto layout disabled):
Mobile view (Padding manually changed to 20px):
