Question

Codepen在这里。正如代码片段所示，第一个元素和第二个元素之间没有间距，但第三个元素有，我不知道它是CSS问题还是SVG问题。我在Chrome和MS Edge上得到了相同的结果。

这里有CSS：

.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

默认情况下，元素之间有一些间距。

您尝试通过display: inline-block以至少几种不同方式进行布局时可以解决此问题：

font-size: 0在您案例中的父.ctrl-panel上。
每个内联块元素的负margin-left（f.e。margin-left: -.25rem;似乎对第三个元素的布局起作用）
删除html标记上的空白区域（这就是为什么你的前两个元素在一起而第三个元素不在一起，如果你的标记就像</div><div>，那么它就不会有任何间距。）
对float等布局使用替代方法，不考虑这些中间元素间距。

Answer 2

删除div之间代码中的空白区域。内联元素对该间距很敏感。

</div><div

codepen example

内联块之间的间距

2 个答案: