Почему 4 25% ширины встроенных блоков не могут оставаться на одной линии? [Дубликат]

В этом случае ваши div элементы были изменены с элементов уровня block на элементы inline. Типичной характеристикой элементов inline является то, что они соблюдают пробелы в разметке. Это объясняет, почему между элементами создается промежуток пробела пространства. (пример)

Существует несколько решений, которые могут быть использованы для решения этой проблемы.

Способ 1 - Удалить пробел из разметки

Пример 1 - Прокомментировать пробел: (пример)

<div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div>

Пример 2 - Удалить разрывы строк: (пример)

<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>

Пример 3 - Закройте часть тега на следующей строке (пример)

<div>text</div
><div>text</div
><div>text</div
><div>text</div
><div>text</div>

Пример 4 - Закройте весь тег на Следующая строка: (пример)

<div>text
</div><div>text
</div><div>text
</div><div>text
</div><div>text
</div>

Способ 2 - Сброс font-size

Так как пробелы между элементами inline определяются font-size, вы можете просто сбросить font-size на 0 и, таким образом, удалить пространство между элементами.

Просто установите font-size: 0 на родительские элементы, а затем объявите новый font-size для элементов детей. Это работает, как показано здесь (пример)

#parent {
    font-size: 0;
}

#child {
    font-size: 16px;
}

Этот метод работает очень хорошо, так как он не требует изменения разметки; однако, он не работает, если дочерний элемент font-size объявлен с помощью em единиц. Поэтому я рекомендую удалить пробелы из разметки или, альтернативно, , плавающие над элементами и, таким образом, избегая пространства, сгенерированного элементами inline.

Метод 3 - Установите родительский элемент в display: flex

В некоторых случаях вы также можете установить display родительского элемента на flex. (пример)

Это эффективно удаляет пробелы между элементами в поддерживаемых браузерами . Не забудьте добавить соответствующие префиксы поставщиков для дополнительной поддержки.

.parent {
    display: flex;
}
.parent > div {
    display: inline-block;
    padding: 1em;
    border: 2px solid #f00;
}

.parent {
    display: flex;
}
.parent > div {
    display: inline-block;
    padding: 1em;
    border: 2px solid #f00;
}

<div class="parent">
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
</div>

Примечания сторон:

Неверно отрицательно использовать отрицательные поля, чтобы удалить пространство между элементами inline. Пожалуйста, не используйте отрицательные поля, если есть другие, более оптимальные решения.