Расстояние между inline-блоком

html css svg

2120 просмотра

2 ответа

Codepen здесь. Как показывает фрагмент, первый и второй элементы не имеют промежутков между ними, но третий имеет, я не знаю, это проблема 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>
Автор: zl2003cn Источник Размещён: 08.11.2019 11:24

Ответы (2)


2 плюса

Решение

Удалите пробелы в коде между вашими div. Встроенные элементы чувствительны к этому интервалу.

</div><div

пример кода

Автор: j08691 Размещён: 20.08.2016 02:14

3 плюса

Элементы по умолчанию имеют некоторый интервал между ними.

Вы можете исправить это, пытаясь сделать макеты display: inline-blockхотя бы несколькими способами:

  1. font-size: 0на родителя .ctrl-panelв вашем случае.
  2. Отрицательно margin-leftдля каждого элемента встроенного блока (например, margin-left: -.25rem;кажется, что работает над вашим макетом на этом третьем элементе)
  3. Удалите пустые пробелы в html-разметке (вот почему ваши первые два элемента вместе, а третий нет, если ваша разметка такова, что между </div><div>ними не будет пробелов).
  4. Используйте альтернативный метод для макетов, например, floatкоторый не будет учитывать эти промежутки между элементами.
Автор: Juan Ferreras Размещён: 20.08.2016 02:14
Вопросы из категории :
32x32