Удаление пробела (Gap) между элементами inline-block с помощью CSS

Вы пытаетесь создать встроенную сетку с вашими собственными правилами CSS, используя режим отображения встроенного блока? Вероятно, вы расстроены и спрашиваете себя: «Почему, черт возьми, есть пространство между моими элементами !?». Несмотря на то, что ваш CSS может быть очень простым, у вас всегда будет пробел между вашими HTML-элементами в стиле display: inline-block. Рассмотрим следующий фрагмент:


1
2
3
4
5
.head-item {
width: 50px;
height: 50px;
text-align: center;
display: inline-block;
border: 1px solid gray;
}

Уже представляли, как это должно выглядеть? Что ж, с нормальным воображением CSS наше ожидание:

Встроенные блочные элементы без пробелов

Однако вместо этого вы получите следующий результат:

Встроенное пространство элемента блока между

В случае, если вы этого тоже не заметили, между каждым элементом Div с пробелом (во втором ряду выделен синим цветом). head-item учебный класс. В соответствии с нашим стилем, у нас есть простые блоки 50х50, текст которых отцентрирован, а его границы серые. Тогда в чем проблема? Разметка, даже выполняемая внутри среды без других правил CSS, всегда будет отображать разрыв между каждым div с помощью inline-block. Это само по себе не ошибка, а ожидаемое поведение элемента, использующего display: inline-block,

Чтобы легко решить эту проблему, если целью является создание встроенной группы div, можно установить свойство float класса left:

.head-item {
float: left;
width: 50px;
height: 50px;
text-align: center;
border: 1px solid gray;
}

Это немедленно произведет нашу желаемую сетку. Однако это может оказаться бесполезным в ваших случаях и может не работать с другими стилями. В этой статье мы поделимся с вами возможными решениями, которые вы можете применить в своем проекте для решения этой проблемы.

1. Удалите пробелы между тегами HTML

Первое и наиболее известное решение для решения этой проблемы — обрезка каждого пробела между HTML-элементами, имеющими свойство display: inline-block, например, если мы удалим пробелы из нашей начальной разметки, мы получим теперь:


1
2
3
4
5

Предыдущая уценка (такая же, но без пробелов между тегами html) позволила бы успешно отобразить желаемый результат div в строке без пробелов:

Встроенные блочные элементы без пробелов

Как видите, нам не нужно было добавлять дополнительные стили, а просто удалять пробелы между элементами. Если вы хотите использовать это решение, возможно, если вам не нужны проблемы с другими программистами по поводу того, насколько грязен ваш код, то вы можете сделать это, используя язык вашего сервера, например, с PHP:

)\s*(\<)/m', '$1$2', $html);
echo $html;

2. Удалите пробелы между тегами HTML, используя комментарии

Это решение теоретически такое же, как и первое, однако вам не нужно размещать уценку в одной строке, вместо этого откройте комментарий с точки, где заканчивается ваш элемент, и закройте комментарий, где начинается следующий элемент.


1
2
3
4
5

3. Использование отрицательной маржи

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


1
2
3
4
5
.head-item {
width: 50px;
height: 50px;
text-align: center;
display: inline-block;
border: 1px solid gray;
}
.head-item:not(:first-child) {
margin-left: -4px;
}

4. Monkeypatch родительский размер шрифта до 0

Последний метод включает в себя любопытную модификацию и, вероятно, не лучший вариант для вашего проекта. Это решение связано с размером шрифта контейнера ваших элементов встроенного блока, в этом случае вам нужно установить font-size вашего контейнера в 0 (пробел с размером шрифта 0 равен элементу ширины 0) и укажите размер шрифта дочерних элементов. В нашем случае с разметкой примера нам нужно изменить заголовок и head-item класс со следующими значениями:


1
2
3
4
5
.header {
/* Set container font-size */
font-size: 0;
}
.head-item {
width: 50px;
height: 50px;
text-align: center;
display: inline-block;
border: 1px solid gray;
/* Force font-size of child elements */
font-size: 16px;
}

Это решило бы и нашу проблему. Какой метод использовать полностью зависит от вас, inline-block действительно полезен в некоторых сценариях, однако важно также знать, как справляться с этим раздражающим пробелом или научиться жить с ним.

Ссылка на основную публикацию
Adblock
detector