zl2003cn zl2003cn - 3 months ago 17
CSS Question

Spacing between inline-block

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

Remove the white space in the code between your divs. Inline elements are sensitive to that spacing.

</div><div

codepen example