Spacing between inline-block [duplicate] - html

Question

This question already has answers here:
inline-block boxes not fitting in their container [duplicate]
(2 answers)
Closed 6 years ago.
Codepen here.
As the snippet shows, the first element and second one have no spacing between them, but the third one have, I don't know if it's a CSS problem or a SVG problem. I got same result on Chrome and MS Edge.
CSS here:
.controls-inline {
display: inline-block;
}
HTML here:
<div id="ctrl-panel">
<div class="controls-inline controls-btn" id="play-btn-wrapper">
<svg id="play-btn" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 58 58" xml:space="preserve" width="50px" height="50px">
<circle style="fill:#EBBA16;" cx="29" cy="29" r="29"></circle>
<g>
<polygon id="play-btn-polygon" style="fill:#FFFFFF;" points="44,29 22,44 22,29.273 22,14 "></polygon>
<path style="fill:#FFFFFF;" d="M22,45c-0.16,0-0.321-0.038-0.467-0.116C21.205,44.711,21,44.371,21,44V14
c0-0.371,0.205-0.711,0.533-0.884c0.328-0.174,0.724-0.15,1.031,0.058l22,15C44.836,28.36,45,28.669,45,29s-0.164,0.64-0.437,0.826
l-22,15C22.394,44.941,22.197,45,22,45z M23,15.893v26.215L42.225,29L23,15.893z"></path>
</g>
</svg>
</div>
<div class="controls-inline" id="progressbar-wrapper" style="margin-right: 0px;">
<svg id="progressbar" width="675" height="50" preserveAspectRatio="none">
<g>
<path d="M25,1 a23,23 0 1,0 0,48 l625,0 a23,23 0 0,0 0,-48 z" stroke="#EBBA16" stroke-width="2px" fill="white">
</path>
</g>
</svg>
</div>
<div class="controls-inline controls-btn">
<svg version="1.1" id="volumn-btn" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 58 58" style="enable-background:new 0 0 58 58;" xml:space="preserve">
<circle style="fill:#EBBA16;" cx="29" cy="29" r="29"></circle>
<path style="fill:white;" d="M16.427,20H8.104C6.942,20,6,20.942,6,22.104v12.793C6,36.058,6.942,37,8.104,37h8.323
c0.375,0,0.743,0.1,1.067,0.29L30.83,49.706C32.232,50.531,34,49.52,34,47.893V9.107c0-1.627-1.768-2.638-3.17-1.813L17.494,19.71
C17.17,19.9,16.802,20,16.427,20z"></path>
<path style="fill:white;" d="M41.541,42.042c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414
c6.238-6.238,6.238-16.39,0-22.628c-0.391-0.391-0.391-1.023,0-1.414s1.023-0.391,1.414,0c7.018,7.019,7.018,18.438,0,25.456
C42.052,41.944,41.796,42.042,41.541,42.042z"></path>
<path style="fill:white;" d="M38,38c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414
c4.297-4.297,4.297-11.289,0-15.586c-0.391-0.391-0.391-1.023,0-1.414s1.023-0.391,1.414,0c5.077,5.077,5.077,13.337,0,18.414
C38.512,37.902,38.256,38,38,38z"></path>
</svg>
</div>
</div>

Answer 1

Elements have by default some spacing inbetween them.
You can fix this when trying to make layouts through display: inline-block in at least a few different ways:
font-size: 0 on the parent .ctrl-panel in your case.
Negative margin-left on every inline block element (f.e. margin-left: -.25rem; seems to work on your layout on that third element)
Remove empty spaces on the html markup (this is why your first two elements are together and the third one is not, if your markup is like </div><div> there won't be any spacing).
Use an alternative method for layouts like float which will not take into account these in-between element spacings.

Answer 2

Remove the white space in the code between your divs. Inline elements are sensitive to that spacing.
</div><div
codepen example