Странный интервал между SVG и основным контентом

Question

Проблема

У меня есть следующий код, и я не понимаю, почему между section:before и section пробел:

section {
    background-color: #E9F6FF;
  width: 100%;
  display: block;
  height: 100px;
}

section:before,
section:after {
    display: block;
    width: 100%;
    background-color: #ccc;
}

section:before {
    content: url(https://svgshare.com/i/NSF.svg);
}

section:after {
    content: url(https://svgshare.com/i/NRP.svg);
}

<section></section>

Что я пробовал

Я попытался проверить, было ли у SVG окно просмотра больше, чем сама форма.

Я также пытался удалить поля и отступы на всех элементах.

Вопрос

Почему там это пространство? Как его удалить?

Answer 1

Похоже, место зарезервировано для спусковых устройств. Если я добавлю font-size:0, он закрывает пробел:

section {
    background-color: #E9F6FF;
  width: 100%;
  display: block;
  height: 100px;
}

section:before,
section:after {
    display: block;
    width: 100%;
    background-color: #ccc;
    font-size:0;
}

section:before {
    content: url(https://svgshare.com/i/NSF.svg);
}

section:after {
    content: url(https://svgshare.com/i/NRP.svg);
}

<section></section>