14

Как прижать блоки друг к другу, убрать отступы между элементами со свойством display: inline-block?

ul {
  text-align: center;
}
li {
  list-style: none;
  display: inline-block;
  border:1px solid #000;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

codepen

1

4 ответа 4

13

Дело в том, что inline-block'и - это как слова.
Если между ними в разметке есть пробельные символы, то браузер отобразит пробел.

Перечислю несколько нормальных способов убирания пробелов.
Есть ещё охапка не слишком нормальных - про них промолчу.

Писать их подряд

ul {
  text-align: center;
}
li {
  list-style: none;
  display: inline-block;
  border:1px solid #000;
}
<ul>
  <li>1</li><li>2</li><li>3</li>
</ul>

Или так

ul {
  text-align: center;
}
li {
  list-style: none;
  display: inline-block;
  border:1px solid #000;
}
<ul>
  <li>
    1
  </li><li>
    2
  </li><li>
    3
  </li>
</ul>

Использовать комментарии

ul {
  text-align: center;
}
li {
  list-style: none;
  display: inline-block;
  border:1px solid #000;
}
<ul>
   <li>1</li><!--
--><li>2</li><!--
--><li>3</li>
</ul>

Не закрывать li явно

ul {
  text-align: center;
}
li {
  list-style: none;
  display: inline-block;
  border:1px solid #000;
}
<ul>
  <li>1
  <li>2
  <li>3
</ul>


Дополнение

В css нет честного способа не вообще не показывать пробелы между элементами. Есть костыль с font-sizeом (описанный в соседнем ответе), который не только гробит наследование размера шрифта, но и не работает в некоторых браузерах; есть костыль с word-spasing/letter-spacing/margin, в котором мало того, что под каждый браузер своя конструкция, так он ещё и привязан к шрифту, поскольку ширина пробела различна в разных шрифтах. Убрать пробел из разметки - это честный способ, остальные - нет. А если надо только css, то следует отказаться от inline-block и использовать flex или float, но вопрос не об этом.

А вот что случается с теми, кто считает иначе.

На всякий случай приведу вариант с использованием flexbox

Здесь нет привязки к разметке, однако, flex-box в некотором роде подобен таблицам и его не рекомендуется использовать для значительных частей сайта (например, лейаута) из-за возможного снижения производительности. К тому же стоит проверить поддержку браузерами и необходимость использования префиксов.

ul {
  display: flex;
  justify-content: center;
}
li {
  list-style: none;
  border: 1px solid #000;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

9
  • 1
    обнулять font-size гораздо более нормально, чем уповать на то что программист сохранит такую разметку, при натягивании на движок, например
    – xaja
    Commented 22 нояб. 2015 в 14:52
  • @xaja, я уже в соседнем ответе прокомментировал, что в Опере 12 зазор между блоками всё равно есть. Ещё при изменении размера шрифта ты прерываешь наследование и вынужден явно его указать для элементов. Т. е. уже нельзя в одном месте изменить шрифт - надо в двух - подготовим запас граблей заранее. А если программист криворукий и не думает, что в разметке надо сохранять, а что нет, то ничто не поможет.
    – Qwertiy
    Commented 22 нояб. 2015 в 14:55
  • Ну да, давайте минусовать правильное решение и городить всякие костыли.
    – Qwertiy
    Commented 22 нояб. 2015 в 14:58
  • у вас далеко не полный ответ, с претензией на полный. а регулировать верстку HTML-разметкой такого рода это не костыли?
    – xaja
    Commented 22 нояб. 2015 в 15:00
  • @xaja, в css нет честного способа не вообще не показывать пробелы между элементами. Есть костыль с font-sizeом, который не только гробит наследование, но и не работает в некоторых браузерах; есть костыль с word-spasing/letter-spacing, в котором мало того, что под каждый браузер своя конструкция, так он ещё и привязан и шрифту, поскольку ширина пробела различна в разных шрифтах. Убрать пробел из разметки - это честный способ, остальные - нет. А если надо только css, то следует отказаться от inline-block и использовать flex или float, но вопрос не об этом.
    – Qwertiy
    Commented 22 нояб. 2015 в 15:05
4

Есть много решений, довольно подробно описано здесь http://codepen.io/anon/pen/megQVe, самое простое, изменять font-size ul и li отдельно

ul {
  text-align: center;
  font-size: 0px;
}
li {
  list-style: none;
  display: inline-block;
  border:1px solid #000;
  font-size: 16px;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>  

5
  • Смотрю из Оперы 12 - не работает.
    – Qwertiy
    Commented 22 нояб. 2015 в 14:51
  • А аппаратное решение какое нибудь есть? Commented 22 нояб. 2015 в 14:53
  • @ОнотолЕ, не используйте inline-block и не надо будет придумывать :-)
    – Grundy
    Commented 22 нояб. 2015 в 14:55
  • 2
    @ОнотолЕ, что знаяит "аппаратное"?
    – Qwertiy
    Commented 22 нояб. 2015 в 14:56
  • а как тогда можно все по центру отцентрировать? Commented 22 нояб. 2015 в 14:59
0

ul {
  text-align: center;
}
li {
  list-style: none;
  display: table-cell;
  border:1px solid #000;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>  

4
  • Поменяется font-size или просто сам шрифт, ширина пробела стане другой и конец этой подгонке.
    – Qwertiy
    Commented 22 нояб. 2015 в 16:27
  • Даже здесь по-разному выглядит. Опера 12 и Хром в Windows рисуют одинарную границу между элементами, а FF в Linux Mint - двойную.
    – Qwertiy
    Commented 22 нояб. 2015 в 19:35
  • Как насчёт варианта с "display: table-cell;" ? Commented 22 нояб. 2015 в 20:19
  • 1
    Да, table-cell возможен, но у него табличные побочные эффекты. Он растягивается по содержимому - overflow использовать затруднительно. Table-cell сам по себе является clearfix'ом. И ещё что-то, на вскидку не вспомню. Если всё это устраивает, то да.
    – Qwertiy
    Commented 22 нояб. 2015 в 20:50
0

Весь HTML документ представляется узлом документа, в котором каждый HTML тэг является узлом элемента, в котором текст внутри HTML тега является текстовым узлом.

Дело в том, что между тегами располагаются невидимые узлы, содержащие значение /n - символ новой строки в исходном коде.

Чтобы вычислить нужный узел, от которого нужно избавиться, создаёте work.js файл, подключаете его в HTML файл.

В work.js вставляете следующий код:

let nodes = document.body.childNodes // Получение body и его дочерних узлов console.log(nodes) // Просмотр содержимого переменной nodes

Далее жмёте F12 и во вкладке Console получаете результат. Находите нужные инлайн блоки, и узел между ними. Снова вставляете в ваш work.js следующую строку:

nodes[4].nodeValue = '' // Изменить значение узла на пустую строку

Так к примеру, если ваши inline-blocks были 3 и 5 по счёту с начала документа, то нужный узел 4. Таким образом мы указываем на конкретный индекс узла [4] переменной nodes.

Чтобы полностью овладеть CSS изучайте JS.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.