Содержание
Вы пытаетесь создать встроенную сетку с вашими собственными правилами 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 действительно полезен в некоторых сценариях, однако важно также знать, как справляться с этим раздражающим пробелом или научиться жить с ним.