Spacing between inline-block

Question

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>

score 3 · Answer 1 · answered Aug 20 '16 at 14:14

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.

score 2 · Accepted Answer · answered Aug 20 '16 at 14:14

2

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

</div><div

codepen example

answered Aug 20 '16 at 14:14

j08691

204,283
31
260
272

1

this is correct! – belle tian May 25 '17 at 09:03

Spacing between inline-block

2 Answers2