CODEWITHSUNDEEP
htmlcss
ChiefTwoPencils
ChiefTwoPencils

Reputation: 13940

What's causing unwanted space with zero margins?

I have a basic template started with minimal css. I have set the padding and margin to 0 yet I have a small amount of whitespace to the right of the body. Here's the important css: 

:root {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: calc(1vw + 0.6em);
}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  font-family: Helvita, Arial, sans-serif;
  background-color: $no-flash-white;
}


Here's what the dev tools shows when inspecting the body where we can see the user agent styles being overridden:

enter image description here

Despite that however, this is the result which I cannot seem to override even with global resets like seen here:

enter image description here

How can I identify the culprit here and what is the least obtrusive approach to fixing it?

Upvotes: 3

Views: 76

Answers (1)

tao
tao

Reputation: 90277

What you're showing is not a margin, but a scrollbar. That's how it looks on desktop devices. Typically it has 17px on Chrome although small variations have been observed, depending on OS.

There are no W3C recommendations regarding the scrolling mechanism its size, color or behavior, or if it should be painted inside or outside of the viewport. So its entirely browser territory. To make things worse, most browsers paint them differently on click based devices than on touch based devices.

That concludes my answer, but if you're interested in more on scrollbars, here are a few general observations:

Over the past few years, Firefox chose a similar behavior on desktop to the one on mobile, which is to render the scrollbar transparent, paint it over the page itself and only show it when hovered or when scrolling occurs.

Even though this might seem like a good idea (page always has same size, regardless of presence of scrollbar), technically, it disables pointer events on the entire area it is painted on and that has been a major argument of technical purists.

Probably the biggest problem with painting it besides the page (as Chrome does it on desktops) is the fact you can't integrate it with your page, as 

::-webkit-scrollbar {
   background-color: transparent;
}

... results in it being white (which is the browser's background, not the page's).

The only practical solution for controlling the looks of the scrolling mechanism cross-browser/cross-device is to disable the scrollbar mechanism altogether and build your own, either from scratch or using dedicated libraries, which are invariably built from HTML elements. They have a tendency to fail or perform poorly on mobile devices, where the recommendation is to disable whatever library you're using.

It should also be noted that any such custom solution comes at a high price performance wise (scroll can fire up to 100 times/second). Performance increases by throttling, at the expense of page not responding so sharply to pointer changes (and/or scrollbar repainted with delay from scrolling event). Decent scrolling libraries do point this out.

If you want to play with customizing webkit scrollbars here's something they published on their blog.

Upvotes: 3

Related Questions