rick@tillitsdone.com

+66824564755

Scroll to discover

CSS scroll-padding-inline-start Optimize Scroll Containers

The CSS scroll-padding-inline-start property defines the offset for the start edge in the inline dimension of a scroll container.

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:

CSS Scroll Snap Module Level 1 - padding-longhands-logical

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:

/* Keyword value */
scroll-padding-inline-start: auto;

/* Length values */
scroll-padding-inline-start: 10px;
scroll-padding-inline-start: 1em;
scroll-padding-inline-start: 10%;

/* Global values */
scroll-padding-inline-start: inherit;
scroll-padding-inline-start: initial;
scroll-padding-inline-start: revert;
scroll-padding-inline-start: revert-layer;
scroll-padding-inline-start: unset;

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, usually 0px.
Global values: Includes inherit, initial, revert, revert-layer, and unset.

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

<!DOCTYPE html>
<html>
<head>
    <style>
        .geeks {
            width: 270px;
            height: 300px;
            scroll-snap-align: none start;
        }

        .Website {
            width: 300px;
            height: 300px;
            border: 2px solid green;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            scroll-snap-type: x mandatory;
            scroll-padding-inline-start: 90px; /* Adding padding at the start edge */
        }
    </style>
</head>
<body>
    <div class="Website">
        <img src="WebsiteUrl" class="geeks">
        <img src="WebsiteUrl" class="geeks">
        <img src="WebsiteUrl" class="geeks">
        <img src="WebsiteUrl" class="geeks">
        <img src="WebsiteUrl" class="geeks">
        <img src="WebsiteUrl" class="geeks">
    </div>
</body>
</html>

Explanation

In this example:

The .Website container has horizontal scrolling enabled and vertical scrolling disabled.
The scroll-snap-type property is set to x mandatory, making the container snap to the nearest scroll snap position along the x-axis.
The scroll-padding-inline-start property is set to 90px, 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.

CSS Blogs

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

CSS property CSS animation

css_property_cover/css-property-scroll-padding-inline.png

CSS scroll-padding-inline Enhance Scroll Padding Learn about CSS scroll-padding-inline, a property for managing scroll padding in the inline dimension. Discover its use cases and available options.

css_property_cover/css-property-border-color.png

CSS Border-Color Enhance Border Appeal Learn how to use CSS border-color to enhance the visual appeal of your web designs. Explore available options like hex codes, RGB, RGBA, HSL, and HSLA.

css_property_cover/css-property-padding-inline-end.png

CSS padding-inline-end Mastering Logical Padding Learn about the CSS padding-inline-end property, which defines logical inline end padding. Use it to create flexible and responsive designs with options like length, percentage, auto, inherit, initial, and unset.

css_property_cover/css-property-scroll-margin-block-end.png

CSS scroll-margin-block-end Enhance Scroll Behavior CSS scroll-margin-block-end defines the margin at the end of the block dimension for scroll snap areas. It improves scrolling behavior with length and global values.

css_property_cover/css-property-scroll-margin-right.png

CSS scroll-margin-right Enhance Scroll Snap Control Discover the CSS scroll-margin-right property for precise control over the right margin of scroll snap areas. Learn its use cases, available options, and how to enhance scrolling experiences.

css_property_cover/css-property-scroll-padding-block.png

CSS scroll-padding-block Enhance Scrolling Experience CSS scroll-padding-block enhances scrolling by adding padding around scrollable areas. Use it to avoid content being obscured by fixed elements like headers. Options include auto, length, and percentage values.

View all 337 CSS blogs

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?

Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

Let's keep in Touch

Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.

Contact Information

rick@tillitsdone.com+66824564755

Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.

Address

9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand

Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.

Social media

Facebook Instagram LinkedIn

Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.

We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.

DesignRush
web design companies

Goodfirms