Display inline block убрать отступы: «Загадочные отступы» между инлайн-элементами — CSS-LIVE

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

Как прижать блоки друг к другу, убрать отступы между элементами со свойством 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

• html
• css

1

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

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, но вопрос не об этом.

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

Здесь нет привязки к разметке, однако, 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

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

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

Весь 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.

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

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

Долой отступы между строчными элементами (и блоками)

Автор: Александр Головко Дата публикации:

Строчные блоки (inline-block) во многих случаях очень удобное средство разметки.

Примеры их использования можно посмотреть в статьях Inline-block: простое свойство для непростых задач, Выравнивание навигации из блоков по центру, Центрирование резинового блока по горизонтали.

Вместе с тем, с ними связан подводный камень. Я бы даже сказал целый булыжник. Хочешь его увидеть? Поставь несколько строчных элементов (или строчных блоков) в ряд.

Допустим имеем такой HTML:

	<ul>
		<li>Стороки.</li>
		<li>Просто</li>
		<li>строки</li>
	</ul>

Делаем элементы строчными:

li{
	display:inline;
}

…или строчными блоками:

li{
	display:inline-block;
	/* Следующие две строки для IE6-7 - эмулируем поведение строчного блока*/
	//display:inline; 
	zoom:1;
}

Проблема

Большинство браузеров разделяет строчные блоки (элементы) отступами. Для удобства восприятия я немного раскрасил блоки.

Опаньки! Что за отступы? Я ничего такого не прописывал!

Давай договоримся, что здесь и далее я буду писать просто «строчный блок», а подразумевать «строчный блок (display:inline-block) или просто строчный элемент (display:inline)», поскольку проблема у них совершенно общая и лечится она тоже одинаково.

Кого лечим?

Итак строчные блоки обзавелись загадочными отступами. Конечно, это касается не только списков. Так же поведет себя и группа расположенных подряд, например, span’ов.

Справедливости ради, следует заметить, что IE6 и IE7 отрисуют все это дело без отступов:

Вот так хочу, чтобы все браузеры отображали!

Не будем вдаваться в детали вопроса, кто прав, а кто виноват (читай — криво поддерживает стандарты), просто добьемся кроссбраузерности. Очень удобно, когда поведение предсказуемое — не задавал я никаких отступов, значит и рисовать мне их не нужно!

На самом деле все просто — чтобы убрать отступы, нужно понять, откуда они там вообще взялись!

Откуда отступы-то?

А понять не сложно. Достаточно просто записать теги в одну строку:

	<ul>
		<li>Стороки.</li><li>Просто</li><li>строки</li>
	</ul>

Чудеса! Отступы пропали сами собой! Вывод: порождают их невидимые символы между тегами — перенос или пробел.

Само собой, «писать все в одну строку» хоть и является кроссбраузерным решением проблемы, но тут не рассматривается, по понятным причинам (ну кто ж пишет без отступов?). Ищем другие пути.

Долой отступы!

Раз отступы создают символы из контейнера, здравой мыслью будет эти символы «обезвредить» — задать им font-size:0; (главное, не забыть, что это свойство наследуется и перебить его для самих потомков):

ul{
	font-size:0;
}
li{
	font-size:14px;
	display:inline;
}

Отличное решение! Строчные блоки действительно прижались друг к другу. Осталась еще небольшая косметическая проблема: в некоторых браузерах (например, в Opera 9.5 и младше) замечен отступ сверху или снизу в пределах родителя (родитель на рисунке залит бледным серо-зеленым):

картинка увеличена, чтоб было видно отступы по вертикали

Проблема эта сродни описанной в статье IMG внутри блока — убираем странный отступ, и лечится примерно так же: добавляем line-height:0; (опять не забываем перекрыть у потомка). Итак, получаем:

ul{
	font-size:0;
	line-height:0;
}
li{
	font-size:14px;
	line-height:normal; /* ну или другое подходящее значение */
	display:inline;
}

Теперь-то все хорошо и красиво? Не тут-то было!

Пришла беда, откуда не ждали

Видать, действительно эти отступы должны быть! В подтверждение этому есть два железных аргумента:

1. их не рисует IE6-7;
2. их, несмотря на наши старания, все равно рисуют Webkit-браузеры.

Да-да! И Safari и Chrome после всех вышеизложенных ухищрений соизволили просто уменьшить отступы с трех пикселей до одного!

Упрямые webkit’ы не хотят сдаваться!

Update by Nick. Еще один скрытый сюрприз преподнес FF. Если масштабировать страницу иногда наблюдается дополнительный отступ в 1px сверху. Лечится это добавлением правила display: -moz-inline-stack;

Окончательное решение

Побороть webkit’ы получилось с помощью letter-spacing:-1px. При этом никаких вредных побочных эффектов обнаружено не было (если, конечно не забыть перекрыть свойство у потомков).

Окончательный CSS с кроссбраузерным решением для строчных элементов:

ul{
	font-size:0; /* убираем горизонтальные отступы */
	line-height:0; /* ...и вертикальные в некоторых браузерах */
	letter-spacing:-1px; /* переубеждаем webkit'ы */
}
li{
	font-size:14px; /* Не забываем восстановить нормальные значения */
	line-height:normal;
	letter-spacing:normal;	
	display:inline;
}

Для строчных блоков:

ul{
	font-size:0; /* убираем горизонтальные отступы */
	line-height:0; /* ...и вертикальные в некоторых браузерах */
	letter-spacing:-1px; /* переубеждаем webkit'ы */
}
li{
	font-size:14px; /* Не забываем восстановить нормальные значения */
	line-height:normal;
	letter-spacing:normal;
	display: -moz-inline-stack!important;
	display:inline-block;
	//display:inline;
	zoom:1;
}

Не забудь, что свойство zoom невалидно. Поэтому в боевых условиях выноси его и хак для IE в отдельный CSS, подключаемый с помощью условных комментариев.

Демонстрационный пример

Проверено в:

• IE 6-8
• Firefox 3.5
• Opera 9.5-10.5
• Safari 4
• Chrome 7

html — Как убрать пробел между встроенными/встроенными блочными элементами?

Сегодня мы должны просто использовать Flexbox.

---

СТАРЫЙ ОТВЕТ:

ОК, хотя я проголосовал за размер шрифта : 0; и не реализованы функции CSS3 ответов, после попытки я обнаружил, что ни один из них не является реальным решением .

На самом деле не существует ни одного обходного пути без сильных побочных эффектов.

Потом Решил убрать пробелы (этот ответ касается этого аргумента) между встроенными блоками div из моего источника HTML ( JSP ), поворачивая это:

 

    Я inline-block div

<дел>
    Я inline-block div

 

    Я inline-block div
<дел>
    Я inline-block div

 

 
    

    
        
            <дел>
                Я inline-block div в матрице
                (Сделайте что-нибудь здесь с нажатым объектом...)