<div class="contentBox"> <strong>Intro</strong> <br> Below you will find an example of HTML and CSS that renders differently on my <strong class="pc1">Home Desktop</strong>, <strong class="pc2">Work Desktop</strong> and <strong class="pc3">Laptop</strong>. All three are running the same Chromium browser, all three are Windows 10. <br><br> I realize the code below could be written better. I realize that having white space between the div elements will render with a space. I realize there may be many ways of acheiving what I want. <ul class="badTouch"> <li>I am <strong>not</strong> looking for a different way to write this.</li> <li>I am <strong>not</strong> looking for suggestions on how to fix this.</li> </ul> <div class="goodTouch"> I am simply wondering why this identical HTML/CSS displays differently on different machines, despite the browser being binary identical. That is all. </div> </div> <div class="contentBox"> <strong>Graph</strong> <br> The graph below has teal absolutely positioned lines on top.<br> Below that, are approximately 40 inline-block divs, evenly spaced with fixed width.<br> On my desktop the absolute lines match the inline-block lines perfectly. See the screenshots below. <div class="gridBox"> <div class="topGrid"> <div class="relContainer"> <div class="absLine pos1"></div> <div class="absLine pos2"></div> <div class="absLine pos3"></div> <div class="absLine pos4"></div> <div class="absLine pos5"></div> </div> </div> <div class="bottomGrid"> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> <div class="evenlySpacedLine"></div> </div> </div> </div> <div class="contentBox"> <strong>Screenshots</strong> <br>Below is a screen shot, of the above HTML/CSS graph rendered on my <strong class="pc1">Home Desktop</strong>. <em><small>(Win10/Chromium)</small></em> <br> <img src="http://pasteall.org/pic/show.php?id=116632"/> <br> Below is a screen shot, of the above HTML/CSS graph rendered on my <strong class="pc3">Laptop</strong>.. <em><small>(Win10/Chromium)</small></em> <br> <img src="http://pasteall.org/pic/show.php?id=116633"/> <br> </div> <div class="contentBox"> <strong>Observations</strong> <br> So what's the deal?<br><br> It appears as though the bottom lines (evenly spaced, fixed width, inline-blocks) are renderingly slightly narrower on other machines.<br><br> I realize that having white space in HTML between the div elements will render white space on the screen between the lines.<br><br> What I don't understand, is why that white space is inconsistent between machines, even when the browser is the <u>same</u>, and the OS is the <u>same</u>, and the HTML/CSS is the <u>same</u>...<br><br> What is causing this discrepancy? </div>

!