CSS scroll-margin-bottom Property Last Updated : 29 Aug, 2022 Comments Improve Suggest changes Like Article Like Report The scroll-margin-bottom property is used to set all the scroll margins to the bottom of an element at once. The value specified for the scroll-margin-bottom determines how much of the page that is primarily outside the support should remain visible. Hence, the scroll-margin-bottom values represent outsets that define the scroll snap area that is used for snapping this box to the snap port. Syntax: scroll-margin-bottom: length /* Or */ scroll-margin-bottom: Global_Values Property values: This property accepts two-properties mentioned above and described below: length: This property refers to the values defined with length units: px, rem, em, vh, etc.Global_Values: This property refers to the global values like initial, inherit, unset, etc. Note: scroll-margin-bottom doesn’t accept percentage value as the length. Example: In this example, you can see the effect of scroll-margin-bottom by scrolling to a point partway between two of the “interfaces” of the example’s content. HTML <!DOCTYPE html> <html> <head> <style> .scroller { width: 300px; height:300px; overflow-x: hidden; overflow-y: auto; scroll-snap-type:y mandatory; } .scroller > div { width: 300px; height: 300px; font-size: 50px; color: white; display: flex; align-items: center; justify-content: center; scroll-snap-align: end none; } .scroller div:nth-child(odd){ background-color: green; scroll-margin-bottom: 1rem; } .scroller div:nth-child(even){ background-color: rgb(160, 231, 45); scroll-margin-bottom: 3rem; } </style> </head> <body> <div class="scroller"> <div>Geeks</div> <div>for</div> <div>Geeks</div> <div>for</div> <div>Geeks</div> </div> </body> </html> Output: Supported Browsers: Google Chrome 69Edge 79Firefox 68Opera 56Safari 14.1 Comment More infoAdvertise with us Next Article CSS scroll-margin-bottom Property T thacker_shahid Follow Improve Article Tags : Web Technologies CSS CSS-Properties Similar Reads CSS scroll-margin-block property The scroll-margin-block property is used to set all the scroll margins to the start and end of a scroll element at once. This property is shorthand for the scroll-margin-block-start and scroll-margin-block-end property.The selection of the start and end sides depends upon the writing mode. The start 2 min read CSS margin-bottom Property The CSS margin-bottom property is used to specify the amount of margin to be used on the bottom of an element. The margin can be set in terms of length or percentage. Syntax:margin-bottom: <length> | <percentage> | autoProperty values:Length: This value specifies the length of the margin 3 min read CSS scroll-margin Property The scroll-margin property is used to set all the scroll margins of an element at once. The value specified for the scroll-margin determines how much of the page that is primarily outside the support should remain visible. Hence, the scroll-margin values represent outsets that define the scroll snap 2 min read CSS scroll-margin-block-end property The scroll-margin-block-end property is used to set all the scroll margins to the end side of a scroll element at once. This property defines the margin of the scroll snap area at the end of the block dimension that is used for snapping this box to the snap port. Syntaxscroll-margin-block-end: lengt 2 min read CSS scroll-margin-block-start property The scroll-margin-block-start property is used to set all the scroll margins to the start side of a scroll element at once. This property defines the margin of the scroll snap area at the start of the block dimension that is used for snapping this box to the snap port.Syntax:scroll-margin-block-star 2 min read CSS scroll-margin-left property The scroll-margin-left property is used to set all the scroll margins to the left of an element at once. The value specified for the scroll-margin-left determines how much of the page that is primarily outside the support should remain visible.Hence, the scroll-margin-left values represent outsets t 2 min read CSS scroll-margin-right property The scroll-margin-right property is used to set all the scroll margins to the right of an element at once. The value specified for the scroll-margin-right determines how much of the page that is primarily outside the support should remain visible.Hence, the scroll-margin-right values represent outse 1 min read CSS scroll-margin-inline Property The scroll-margin-inline property is used to set all the scroll margins to the start and end of a scroll element at once. This property is shorthand for the scroll-margin-inline-start and scroll-margin-inline-end property. The selection of the start and end sides depends upon the writing mode. The s 2 min read CSS scroll-padding-block Property The scroll-padding-block property is used to set all the scroll padding to the start and end of a scroll container or element in the block dimension at once. This property is shorthand for the scroll-padding-block-start and scroll-padding-block-end property.Hence, the scroll-padding values represent 2 min read CSS margin-top Property The margin-top property in CSS is used to set the top margin of an element. It sets the margin area on the top of the element. The default value of the margin-top property is 0. Syntax:margin-top: length|auto|initial|inherit;Property values:length: It is used to specify the length of the margin with 4 min read Like