PHP_EOL & New Line causing odd div widths/margins?

[AJ_Winslow]

Alright guys, I have been starring at this code and I cant figure out why I am getting this weird result in Chrome and Firefox.
 

Basically, when I run the first for loop without an end of line the divs display correctly and fit within the parent div. When I add an EOL, whether it is be PHP_EOL or simply press enter between each line, the divs get a funky width or margin (im not sure which). However, when I inspect the divs in Chrome, all their properties are the same; but, as shown in the photo below, there is clearly a visual change! Can someone explain this to me?

 

<div id="Container">
<?
for ($i = 0; $i <= 10; $i++) {
    echo '<div class="StoreItem">'.$i.'</div>';
}

for ($i = 0; $i <= 10; $i++) {
    echo '<div class="StoreItem">'.$i.'</div>'.PHP_EOL;
}
?>
</div>

<style>
#Container {
  	position: fixed;
	top: 75px;
	left: 75px;
	right: 0px;
	bottom: 0px;
	overflow-y: auto;
	margin:5px;
	z-index: 0;
}
.StoreItem {
	display: inline-block;
	margin: 2%;
	height: 300px;
	background: red;
	font-size: 2em;
	font-weight: 700;
	text-align: center;
	width: 21%;
}
</style>

In the image below, the divs created without and EOL output correctly and display 4 across. The second set of divs have an EOL and do not display correctly.

 

<!-- Without EOL -->
<div class="StoreItem">0</div><div class="StoreItem">1</div><div class="StoreItem">2</div><div class="StoreItem">3</div><div class="StoreItem">4</div><div class="StoreItem">5</div><div class="StoreItem">6</div><div class="StoreItem">7</div><div class="StoreItem">8</div><div class="StoreItem">9</div><div class="StoreItem">10</div><div class="StoreItem">0</div>

<!-- With EOL -->
<div class="StoreItem">1</div>
<div class="StoreItem">2</div>
<div class="StoreItem">3</div>
<div class="StoreItem">4</div>
<div class="StoreItem">5</div>
<div class="StoreItem">6</div>
<div class="StoreItem">7</div>
<div class="StoreItem">8</div>
<div class="StoreItem">9</div>
<div class="StoreItem">10</div>

Any help or information would be appreciated!

[AJ_Winslow]

Well, after a glass of water i got to thinking... what does inline-block actually do? And well here is a good website to check out to figure out how I found the issue:

https://css-tricks.com/fighting-the-space-between-inline-block-elements/

 

inline-block adds spaces between the elements and with some, "funky" fixes I solved the issue.

Opted to ditch inline-block for float. Never really liked float but it will work nice and clean for this.