Как прижать блоки друг к другу?

ОнотолЕ

Как прижать блоки друг к другу?

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>

http://codepen.io/anon/pen/OyGaVX

3 ответа

ОнотолЕ

Дело в том, что 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><li>2
  </li><li>3
</li></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>


ОнотолЕ

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


ОнотолЕ

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>

licensed under cc by-sa 3.0 with attribution.