# Day 25: scrollbar gutters in body and html DevFeed: [Day 25: scrollbar gutters in body and html]() Original publisher: [Read original article]() Author: Manuel Matuzović Published: 2022-10-28T00:00:00Z Content type: tutorial Language: en Sources: [Manuel Matuzović - Blog]() Topics: [CSS](), [modern web development](), [Web Development]() Tags: [css]() ## AI overview A practical explanation of how CSS scrollbar-gutter behaves on the body and html elements. The article shows why setting scrollbar-gutter on body does not prevent layout shifts and demonstrates that setting it on html works because overflow and scrollbar-gutter are propagated to the viewport. ## Source excerpt When I wrote about the scrollbar-gutter property, my first thought was "omg! I'll put this in my reset stylesheet and use it on the by default". I wanted to do that in order to prevent the page from "jumping" when switching from a long to a short page, a page with overflow to one without. Here's a quick demo to illustrate the issue. When switching from a page with a scrollbar to a page without, you can see how the whole page shifts to the left because the scrollbar takes up space on longer pages. So I tried this... body { scrollbar-gutter: stable; } ...and it didn't work. I looked at the spec and there it says: However, unlike the overflow property, the user agent must not propagate scrollbar-gutter from the HTML body element. So, overflow on the body is propagated to the viewport, which absolutely makes sense. Just try to set a width on the body with a lot of content, you'll see how the width changes, but the scrollbar is still on the inline end of the viewport. If I understand correctly, scrollbar-gutter has no effect on the body because overflow is propagated to the viewport, but scrollbar-gutter isn't. If there's no overflow, then there's no scrollbar gutter. It kinda makes sense to me. (Please correct me if I'm wrong. :)) When I moved the declaration to the element, it worked! That's because both overflow and scrollbar-gutter used on are propagated to the viewport. html { scrollbar-gutter: stable; } My blog doesn't support comments yet, but you can reply via blog@matuzo.at.