The scroll-margin-block-end
property is a CSS property that is used to set the margin between the end of an element and the start of the scrollable area. This property is used to create space between the end of an element and the start of the scrollable area, which can be useful when dealing with elements that are positioned at the bottom of a page or container.
The scroll-margin-block-end
property is part of the CSS Scroll Snap Module Level 1, which provides a way to create scroll snap points that align with the edges of elements. This module also includes properties like scroll-snap-type
, scroll-snap-align
, and scroll-padding
.
The scroll-margin-block-end
property can be used on any element that has a scrollable area, such as a <div>
or <section>
element. It is used to set the margin between the end of the element and the start of the scrollable area.
The value of the scroll-margin-block-end
property can be specified in any valid CSS length unit, such as pixels, ems, or percentages. Negative values are also allowed, which can be used to create an overlap between the element and the scrollable area.
Here are some examples of how the scroll-margin-block-end
property can be used:
<div style="scroll-margin-block-end: 50px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
In this example, the scroll-margin-block-end
property is used to create a margin of 50 pixels between the end of the <div>
element and the start of the scrollable area.
<section style="scroll-margin-block-end: -20px;">
<h2>Section Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</section>
In this example, the scroll-margin-block-end
property is used to create an overlap of 20 pixels between the end of the <section>
element and the start of the scrollable area.
The scroll-margin-block-end
property is supported in most modern browsers, including Chrome, Firefox, Safari, and Edge. However, it is not supported in Internet Explorer.
The scroll-margin-block-end
property is a useful CSS property that can be used to create space between the end of an element and the start of the scrollable area. It is part of the CSS Scroll Snap Module Level 1, which provides a way to create scroll snap points that align with the edges of elements.