CSS has a lot of properties that can be used to style web pages. One of these properties is scroll-padding-block. This property is used to add padding to the block axis of a scroll container. In this article, we will discuss scroll-padding-block in detail.
Scroll-padding-block is a CSS property that is used to add padding to the block axis of a scroll container. A scroll container is an element that has overflow set to scroll or auto. When the content of a scroll container is scrolled, the padding added by scroll-padding-block ensures that the content does not touch the edges of the container.
The block axis is the axis perpendicular to the inline axis. In other words, it is the vertical axis in a horizontal writing mode and the horizontal axis in a vertical writing mode.
The syntax for scroll-padding-block is:
scroll-padding-block: <length> | <percentage>;
The length or percentage value specifies the amount of padding to be added to the block axis of the scroll container. The value can be a positive or negative number.
Here is an example:
.scroll-container { overflow: auto; scroll-padding-block: 20px; }
In this example, the scroll container has 20 pixels of padding added to the block axis.
Here are some code examples that demonstrate the use of scroll-padding-block:
<div class="scroll-container" style="height: 100px; overflow: auto; scroll-padding-block: 20px;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget bibendum bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget bibendum bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget bibendum bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit.</p> </div>
In this example, a div element is used as a scroll container. The height of the container is set to 100 pixels and overflow is set to auto. The scroll-padding-block property is set to 20 pixels. The content of the container is three paragraphs of text.
<style> .scroll-container { height: 100px; overflow: auto; scroll-padding-block: 20%; } .scroll-container p { margin: 0; padding: 10px; background-color: #f0f0f0; } </style> <div class="scroll-container"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget bibendum bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget bibendum bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget bibendum bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit.</p> </div>
In this example, a div element is used as a scroll container. The height of the container is set to 100 pixels and overflow is set to auto. The scroll-padding-block property is set to 20%. The content of the container is three paragraphs of text. The paragraphs have a margin of 0 and a padding of 10 pixels. The background color of the paragraphs is set to #f0f0f0.
Scroll-padding-block is a useful CSS property that can be used to add padding to the block axis of a scroll container. This property ensures that the content of the container does not touch the edges of the container when scrolled. It is easy to use and can be set to a length or percentage value.