В этом случае ваши div
элементы были изменены с элементов уровня block
на элементы inline
. Типичной характеристикой элементов inline
является то, что они соблюдают пробелы в разметке. Это объясняет, почему между элементами создается промежуток пробела пространства. (пример)
Существует несколько решений, которые могут быть использованы для решения этой проблемы.
Пример 1 - Прокомментировать пробел: (пример)
texttexttexttexttext
Пример 2 - Удалить разрывы строк: (пример)
texttexttexttexttext
Пример 3 - Закройте часть тега на следующей строке (пример)
texttexttexttexttext
Пример 4 - Закройте весь тег на Следующая строка: (пример)
text
text
text
text
text
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
.
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;
}
text
text
text
text
text
Неверно отрицательно использовать отрицательные поля, чтобы удалить пространство между элементами inline
. Пожалуйста, не используйте отрицательные поля, если есть другие, более оптимальные решения.