Как прижать блоки друг к другу display: inline-block?

#html #css

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



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

  
1
  
2
  
3





codepen
    

Ответы

Ответ 1

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

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

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



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

  
1
2
3





Или так



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

  

    1
  

    2
  

    3
  





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



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

   
1
2
3





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



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

  
1
  
2
  
3







Дополнение

В 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;
}

  
1
  
2
  
3



Ответ 2

Есть много решений, довольно подробно описано здесь 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;
}

  
1
  
2
  
3



Ответ 3

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

  
1
  
2
  
3