Почему браузер добавляет отступы вокруг элементов svg и как я могу предотвратить это?

Question

Я пытаюсь использовать SVG для создания графики, подобной этой:

Здесь фиолетовые прямоугольники - это участки с белой правой границей, и в каждом столбце их по 12. Установка ширины на 8,333% (что составляет 100/12) делает эту работу.

По разным причинам (например, при печати) я пытаюсь сделать это вместо svg элементов, например:

<div class="svg-test">
  <svg>
    <rect x="0" y="0" width="100%" height="100%"></rect>
  </svg>
  ....10 more of the same      
  <svg>
    <rect x="0" y="0" width="100%" height="100%"></rect>
  </svg>
</div>

с простым стилем:

.svg-test 
{
  width: 400px;
}

.svg-test svg 
{
   height: 20px;
   width: 8.333333%;
   fill: #7a5c8e;
}

(и см. Здесь: https://jsfiddle.net/un8L04ec)

Ни у одного из этих элементов нет отступов или полей (и инструменты браузера подтверждают это), и все же все браузеры отображают эту разметку следующим образом:

Браузер добавляет некоторые нежелательные отступы, в результате чего мои ящики, ширина которых составляет 100% и, следовательно, должны помещаться на одной строке, переносятся на следующую строку. Почему это так, и что я могу сделать, чтобы предотвратить это?

Answer 1

Ваши SVG являются встроенными элементами, а встроенные элементы чувствительны к пробелам в вашем коде. Удалите пробелы в вашем коде, и пробелы исчезнут.

.svg-test {
  width: 400px;
}

.svg-test svg {
  height: 20px;
  width: 8.333333%;
  fill: #7a5c8e;
}

<div class="svg-test">
  <svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg><svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg><svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg><svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg><svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg><svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg><svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg><svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg><svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg><svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg><svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg><svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg>
</div>

Answer 2

Это поведение по умолчанию веб-браузеров.пожалуйста, прочитайте https://css -tricks.com / fight-the-space-Между-inline-block-elements / .

Если вы хотите удалить пробелы между элементами, просто добавьте отрицательное поле вих

.svg-test 
{
  width: 400px;
  display: inline-block;
}

.svg-test svg {
  height: 20px;
  width: 8.333333%;
  fill: #7a5c8e;
  margin-left: -4px;
  margin-bottom: -4px;
}

<div class="svg-test">
      <svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg>
      <svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg>
      <svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg>
      <svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg>
      <svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg>
      <svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg>
      <svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg>
      <svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg>
      <svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg>
      <svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg>
      <svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg>
      <svg>
        <rect x="0" y="0" width="100%" height="100%"></rect>
      </svg>
    </div>