White Space appearing when aligning divs with in-line block

Question

I have a series of 8 divs I'm aligning horizontally within a parent container. Each child div is 12.5% so when laid out across the page this will add up to a total of 100% of the parent. The final div is being pushed below the others because there isn't enough room and this seems to be caused by the mystery whitespace on the right-side of each div.

Does anyone know what is causing this whitespace and more importantly, how to remove it?

body {margin: 0; padding: 0;}

#main-content {
  width: 100%;
  height: 100%;
  position: relative;
}

.linebox{
    margin: 0; padding: 0;
    width: 12.5%;
    display: inline-block;
    background: orange;
    border-right: 1px solid black;
    box-sizing: border-box; 
    height: 100vh;
  position: relative;
}

  <main id="main-content">
      <div class="linebox" id=linebox-1></div>
      <div class="linebox" id=linebox-2></div>
      <div class="linebox" id=linebox-3></div>
      <div class="linebox" id=linebox-4></div>
      <div class="linebox" id=linebox-5></div>
      <div class="linebox" id=linebox-6></div>
      <div class="linebox" id=linebox-7></div>
      <div class="linebox" id=linebox-8></div>
  </main>

To add a little bit, the whitespace actually comes from the whitespace in the html. If you put all your linebox elements on one line without any space between them then you wouldn't get any whitespace. I'd still rather go with the flex approach though. — Alex, Jan 21 '18 at 23:29
Thanks @Alex If you post this as an answer I'll mark it as correct. I prefer this to the flexbox solution which obviously has the potentially for other side effect. — pjk_ok, Jan 21 '18 at 23:37
No problem. :) I can't answer though because the question was marked as duplicate. — Alex, Jan 21 '18 at 23:50

Nate · Answer 1 · 2018-01-21T23:41:22.287

You have 2 options, set the font size to: 0 to remove white space, or your main-content needs to use Flex, for example:

body {margin: 0; padding: 0;}

#main-content {
  width: 100%;
  height: 100%;
  position: relative;
  font-size: 0; // choose one
  display: flex; // or this...
}

.linebox{
    margin: 0; padding: 0;
    width: 12.5%;
    display: inline-block;
    background: orange;
    border-right: 1px solid black;
    box-sizing: border-box; 
    height: 100vh;
  position: relative;
}

  <main id="main-content">
      <div class="linebox" id=linebox-1></div>
      <div class="linebox" id=linebox-2></div>
      <div class="linebox" id=linebox-3></div>
      <div class="linebox" id=linebox-4></div>
      <div class="linebox" id=linebox-5></div>
      <div class="linebox" id=linebox-6></div>
      <div class="linebox" id=linebox-7></div>
      <div class="linebox" id=linebox-8></div>
  </main>

White Space appearing when aligning divs with in-line block

1 Answers1