Q:

100vh results in scroll bar?

I have some really simple html/css that uses 100vh on a body tag, and 100% (or 100vh, I've tried both) on two inline block span's, each span of which has a width of 50vw. I expect to see both spans side by side, each taking up half the screen, and each as tall as the screen - no scrollbars, no white space. Body also has a margin of 0 to help with this. What I see is what I expected except that there is a small vertical scroll bar. I also removed all whitespace from inside the body, as I know this can add space beyond the 100% width. But I can't figure out why I get the scrollbar... I know I can just add an overflow: hidden to body and the scrollbar goes away, but again - why the scrollbar in the first place?
Here is the html file:
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<style>
    body {
        height: 100vh;
        margin: 0;
    }

    span {
        height: 100%;
        width: 50%;
        display: inline-block;
    }

    #left {
        background-color: red;
    }

    #right {
        background-color: green;
    }
</style>
</head>
<body><span id="left"></span><span id="right"></span></body>
</html>

A:

Unfortunately that's the nature of inline elements.  You need to add vertical-align:top to force no line height and other font related spacing.

    body {
        height: 100vh;
        margin: 0;
    }

    span {
        height: 100%;
        width: 50%;
        display: inline-block;
        vertical-align: top;
    }

    #left {
        background-color: red;
    }

    #right {
        background-color: green;
    }
<span id="left"></span><span id="right"></span>

A:

That's because of the inline element white space margin.
Here I used the margin-bottom: -4px; hack (and there is many more) to remove it. Do note though, when using this hack you need to check it against the current font size and adjust it accordingly.
If you really need inline-block, use the vertical-align hack
A better way is to either use flex or float (to support older browsers).
Here is margin-bottom: -4px;

    body {
        height: 100vh;
        margin: 0;
    }

    span {
        height: 100%;
        width: 50%;
        display: inline-block;
        margin-bottom: -4px;
    }

    #left {
        background-color: red;
    }

    #right {
        background-color: green;
    }
  <span id="left"></span><span id="right"></span>

Here is flex

body {
        height: 100vh;
        margin: 0;
        display: flex;
    }

    span {
        height: 100%;
        width: 50%;
    }

    #left {
        background-color: red;
    }

    #right {
        background-color: green;
    }
<span id="left"></span><span id="right"></span>

Here is float

body {
        height: 100vh;
        margin: 0;
    }

    span {
        height: 100%;
        width: 50%;
        float: left;
    }

    #left {
        background-color: red;
    }

    #right {
        background-color: green;
    }
<span id="left"></span><span id="right"></span>

