html - 内联 block 之间的间距

Question

inline-block boxes not fitting in their container [duplicate] 在这里。 正如代码片段所示，第一个元素和第二个元素之间没有间距，但第三个元素有，我不知道这是 CSS 问题还是 SVG 问题。我在 Chrome 和 MS Edge 上得到了相同的结果。

CSS 在这里:

.controls-inline {
  display: inline-block;
}

此处为 HTML:

<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 进行布局时可以修复此问题至少有几种不同的方式:

1. font-size: 0在父级 .ctrl-panel在你的情况下。
2. 否定 margin-left在每个内联 block 元素上(例如 margin-left: -.25rem; 似乎适用于第三个元素的布局)
3. 删除 html 标记上的空格(这就是为什么前两个元素在一起而第三个元素不在一起的原因，如果您的标记类似于 </div><div> 则不会有任何空格)。
4. 对 float 等布局使用替代方法这不会考虑这些元素之间的间距。