корреляция между характеристиками с R

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

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

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

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

text
text
text
text
text

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

text
text
text
text
text

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

text
text
text
text
text

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

text
text
text
text
text

Способ 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;
}
text
text
text
text
text

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

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

0
задан Zeyu Wang 13 July 2018 в 13:48
поделиться