It helps exclude regions obscured by fixed elements and adds space between content and edges.
Supports auto, length, percentage, and global values.
Introduction
The scroll-padding-inline-start
CSS property sets the padding at the start of the scrollable area. This helps ensure important content stays visible and adds space between the content and the scroll container’s edges. It’s useful for improving user experience, especially when dealing with fixed elements like toolbars.
Specification
The scroll-padding-inline-start
property is part of the CSS Scroll Snap Module Level 1, which controls scrolling behavior.
For more details, check out the official specification:
Description
The scroll-padding-inline-start
property sets the padding at the start of the scrollable area. This helps ensure important content stays visible and adds space between the content and the scroll container’s edges.
You can use various values like auto
, length values (e.g., pixels, em units), percentages, and global values (e.g., inherit
, initial
, revert
).
Syntax
Here’s how to use the scroll-padding-inline-start
property in your CSS:
Values
You can use several types of values:
<length-percentage>
: Sets an inwards offset from the start edge. This can be a length (e.g.,10px
) or a percentage (e.g.,10%
).auto
: The offset is determined by the browser, usually0px
.- Global values: Includes
inherit
,initial
,revert
,revert-layer
, andunset
.
Formal Definition
The scroll-padding-inline-start
property defines the padding at the start of the scrollable area.
- Initial value:
auto
- Applies to: Scroll containers
- Inherited: No
- Percentages: Relative to the scroll container’s scrollport
- Computed value: As specified
- Animation type: By computed value type
Browser Compatibility
The scroll-padding-inline-start
property is widely supported across major browsers:
- Firefox: Supported since version 68.
- Chrome: Supported since version 69.
- Edge: Supported since version 79.
- Opera: Supported since version 56.
- Safari: Supported since version 15.
Example
Here’s an example to illustrate how the scroll-padding-inline-start
property works:
HTML
Explanation
In this example:
- The
.Website
container has horizontal scrolling enabled and vertical scrolling disabled. - The
scroll-snap-type
property is set tox mandatory
, making the container snap to the nearest scroll snap position along the x-axis. - The
scroll-padding-inline-start
property is set to90px
, adding 90 pixels of padding at the start edge of the scroll container. - Inside the
.Website
container, there are several images with the class.geeks
, each styled with specific width and height.
When you scroll through the images in the .Website
container, you’ll see a 90-pixel padding at the start edge, thanks to the scroll-padding-inline-start
property. This padding ensures the first image has some breathing room, enhancing the visual experience.
Supported Browsers
The scroll-padding-inline-start
property is supported across modern browsers:
- Firefox: Supported since version 68.
- Chrome: Supported since version 69.
- Edge: Supported since version 79.
- Opera: Supported since version 56.
- Safari: Supported since version 15.
Using the scroll-padding-inline-start
property, web developers can create more user-friendly and visually appealing interfaces, ensuring important content stays visible across different browsers and devices.
We'll be right here with you every step of the way.
We'll be here, prepared to commence this promising collaboration.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.