Откуда берутся отступы между элементами с display: inline-block
и как их убрать? Отступы нигде не фиксируются:
4 ответа
Дело в том, что inline-block
рендерится браузером как буква. Расстояние, которое вы видите между inline-block
и соседними "буквами" — обычный межбуквенный интервал или, если брать термин из типографики, трекинг.
Трекинг не является фиксированным значением и меняется в различных семействах шрифтов, а также зависит от размера шрифта. Из-за этого мы не можем использовать для решения этой проблемы фиксированные значения в свойствах word-spacing
, margin
и т.д.
Эффективно убрать отступы у inline-block
можно несколькими способами:
Вариант 1
В разметке убираем переносы для кнопок.
<main>
<button>Кнопка</button><button>Кнопка</button><button>Кнопка</button>
</main>
Вариант 2
На родителя ставим font-size: 0
, а уже к button
задаём нужный размер шрифта.
main {
font-size: 0;
}
button {
font-size: 14px;
}
Вариант 3
Можно закомментировать конец и начало строки:
<main><!--
--><button>Кнопка</button><!--
--><button>Кнопка</button><!--
--><button>Кнопка</button><!--
--></main>
Вариант 1:
margin-left (отрицательный) — свойство, с помощью которого можно сдвинуть пункты влево, как бы друг на друга, "избавившись" так сказать от ненавистного пробела между них.
ul {
font: 14px Verdana, sans-serif;
}
ul li {
display: inline-block;
width: 50px;
border: 1px solid #E76D13;
margin-left: 0;
}
ul li + li {
margin-left: -.36em;
}
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
<li>Пункт 5</li>
</ul>
Вариант 2:
font-size — свойство, задающее размер шрифта, с помощью которого нашему пробелу (символу) можно выставить размер шрифта, равный нулю, и тем самым сделать его настолько маленьким, что его попусту не будет видно.
ul {
font: 14px Verdana, Geneva, sans-serif;
/* Выставляем родителю значение в ноль */
font-size: 0;
}
ul li {
display: inline-block;
width: 50px;
border: 1px solid #E76D13;
/* Возвращаем в нормальное состояние у потомков */
font-size: 14px;
}
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
<li>Пункт 5</li>
</ul>
Вариант 3:
letter-spacing — свойство, определяющее интервал между символами. По умолчанию (normal) задаёт обычный интервал, исходя из размера и типа шрифта.
ul {
font: 14px Verdana, Geneva, sans-serif;
/* Выставляем родителю значение -.36em */
letter-spacing: -.36em;
}
ul li {
display: inline-block;
width: 50px;
border: 1px solid #E76D13;
/* Возвращаем в нормальное состояние у потомков */
letter-spacing: normal;
}
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
<li>Пункт 5</li>
</ul>
Вариант 4:
word-spacing — свойство, определяющее интервал между словами. По умолчанию так же, как и letter-spacing, задаёт его в зависимости от размера и типа шрифта.
ul {
font: 14px Verdana, Geneva, sans-serif;
/* Выставляем родителю значение -.36em */
word-spacing: -.36em;
/* Лекарство для webkit */
display: table;
}
ul li {
display: inline-block;
width: 50px;
border: 1px solid #E76D13;
/* Возвращаем в нормальное состояние у потомков */
word-spacing: normal;
}
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
<li>Пункт 5</li>
</ul>
Вариант 5:
Прижать элементы друг к другу, т.е. вплотную, тег к тегу, и таким образом убрать межссловный интервал.
ul {
font: 14px Verdana, sans-serif;
}
ul li {
display: inline-block;
width: 50px;
border: 1px solid #E76D13;
}
<ul>
<li>Пункт 1</li><li>Пункт 2</li><li>Пункт 3</li><li>Пункт 4</li><li>Пункт 5</li>
</ul>
Вариант 6:
Поставить комментарии между элементами, тем самым убрав между ними отступы.
ul {
font: 14px Verdana, sans-serif;
}
ul li {
display: inline-block;
width: 50px;
border: 1px solid #E76D13;
}
<ul>
<li>Пункт 1</li><!--
--><li>Пункт 2</li><!--
--><li>Пункт 3</li><!--
--><li>Пункт 4</li><!--
--><li>Пункт 5</li>
</ul>
Вариант 7:
Не указывать закрывающие теги для li
ul {
font: 14px Verdana, sans-serif;
}
ul li {
display: inline-block;
width: 50px;
border: 1px solid #E76D13;
}
<ul>
<li>Пункт 1
<li>Пункт 2
<li>Пункт 3
<li>Пункт 4
<li>Пункт 5
</ul>
Вариант 8:
Переместить закрывающую скобку на следующую строку
ul {
font: 14px Verdana, sans-serif;
}
ul li {
display: inline-block;
width: 50px;
border: 1px solid #E76D13;
}
<ul>
<li>Пункт 1</li
><li>Пункт 2</li
><li>Пункт 3</li
><li>Пункт 4</li
><li>Пункт 5</li>
</ul>
Вариант 9:
JS скриптом:
document.сlearSpaces = function(node) {
var childLength = node.childNodes.length;
if( childLength === 0 ) {
return;
};
for(var i = childLength; i > 0; i -= 1) {
var children = node.childNodes[i - 1];
var nodeType = children.nodeType,
nodeValue = children.nodeValue;
if( nodeType === 8 || ( nodeType === 3 && !/\S/.test( nodeValue ) ) ) {
node.removeChild( children );
}
}
};
document.сlearSpaces(document.querySelector('ul'));
ul {
font: 14px Verdana, sans-serif;
}
ul li {
display: inline-block;
width: 50px;
border: 1px solid #E76D13;
}
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
<li>Пункт 5</li>
</ul>
JQuery скриптом:
$(function() {
$.сlearSpaces = function($elements) {
$elements.contents().each(function() {
var nodeType = this.nodeType,
nodeValue = this.nodeValue;
if (nodeType === 8 || (nodeType === 3 && !/\S/.test(nodeValue))) {
$(this).remove();
};
});
};
$.сlearSpaces($('ul'));
});
ul {
font: 14px Verdana, sans-serif;
}
ul li {
display: inline-block;
width: 50px;
border: 1px solid #E76D13;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
<li>Пункт 5</li>
</ul>
Источник: http://css-live.ru/articles/zagadochnye-otstupy-mezhdu-inlajn-blokami.html
-
Половина рабочий вариантов скопировано с моего ответа, а остальное - костыли. – Vadizar 8 апр '18 в 21:53
Помогло:
Попробуйте указать код всех кнопок в одну строчку
-
У меня тоже такое было когда-то. По этому перешёл на использование
display: flex
– Yuri 1 янв '17 в 20:43 -
@Yuri мне нравятся, как все сейчас разучились верстать и переходят на flexbox, вот только подумали ли вы о поддержке старых браузеров? – Vadizar 2 янв '17 в 9:23
-
@Vadizar,а чего о них думать? Большинство сайтов больших компаний даже перестают их поддерживать и когда заходишь на их сайты со старых браузеров, они пишут, что бы мы обновили его – Yuri 2 янв '17 в 9:25
Более корректный ответ состоит в том, чтобы просто не использовать элементы с display: inline-block
для создания вашей разметки.
Пора использовать более современные CSS-модули: Flexbox для одномерных разметок и CSS Grid для 2D.
Решение данной задачи через Flexbox:
.number-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 330px;
margin: 0 auto;
}
button {
border: none;
width: 100px;
margin: 5px;
height: 100px;
background-color: green;
color: white;
font-size: 16px;
}
<div class="number-buttons">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>0</button>
</div>
Через CSS Grid (более предпочтительно в данном случае):
.number-buttons {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-auto-rows: 100px;
grid-gap: 10px;
justify-content: center;
margin: 0 auto;
}
button {
border: none;
background-color: green;
color: white;
font-size: 16px;
}
button:last-child {
grid-column: 2;
}
<div class="number-buttons">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>0</button>
</div>
-
@Alexandr_TT Для названия CSS-модулей не нужно использовать внутристочное формативание. Это вытекает из ответа на FAQ-вопрос, секция "Названия IDE, библиотек, плагинов, инструментов", так как CSS-модули концептуально схожи с библиотеками кода. – Vadim Ovchinnikov 25 июл '19 в 8:05
-
Вы наверное перепутали топики. Здесь нет никакой моей активности ни в вопросах, ни в ответах, ни в комментариях – Alexandr_TT 27 июл '19 в 15:20
-
@Alexandr_TT Ну версия №2 с помещением Flexbox и CSS Grid во внутристрочное форматирование была ваша (которую я откатил). Если бы вашей активности не было, то вы бы не увидели уведомление об этом сообщении. – Vadim Ovchinnikov 27 июл '19 в 15:23
-