Отступы между элементами с inline-block [дубликат]

#html #css #вёрстка

    На данный вопрос уже ответили:
    
        
            Как прижать блоки друг к другу display: inline-block?
                
                    3 ответа
                
        
    
    
Откуда берутся отступы между элементами с display: inline-block и как их убрать?
Отступы нигде не фиксируются:


    

Ответы

Ответ 1

Дело в том, что inline-block рендерится браузером как буква. Расстояние, которое
вы видите между inline-block и соседними "буквами" — обычный межбуквенный интервал
или, если брать термин из типографики, трекинг. 

Трекинг не является фиксированным значением и меняется в различных семействах шрифтов,
а также зависит от размера шрифта. Из-за этого мы не можем использовать для решения
этой проблемы фиксированные значения в свойствах word-spacing, margin и т.д.

Эффективно убрать отступы у inline-block можно несколькими способами:

Вариант 1

В разметке убираем переносы для кнопок.


  



Вариант 2

На родителя ставим font-size: 0, а уже к button задаём нужный размер шрифта.


main {
  font-size: 0;
}

button {
  font-size: 14px;
}


Вариант 3

Можно закомментировать конец и начало строки:




Ответ 2

Вариант 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;
}

  
Пункт 1
  
Пункт 2
  
Пункт 3
  
Пункт 4
  
Пункт 5





Вариант 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;
}

  
Пункт 1
  
Пункт 2
  
Пункт 3
  
Пункт 4
  
Пункт 5





Вариант 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;
}

  
Пункт 1
  
Пункт 2
  
Пункт 3
  
Пункт 4
  
Пункт 5





Вариант 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;
}

  
Пункт 1
  
Пункт 2
  
Пункт 3
  
Пункт 4
  
Пункт 5





Вариант 5:

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



ul {
  font: 14px Verdana, sans-serif;
}

ul li {
  display: inline-block;
  width: 50px;
  border: 1px solid #E76D13;
}

  
Пункт 1
Пункт 2
Пункт 3
Пункт 4
Пункт 5





Вариант 6:

Поставить комментарии между элементами, тем самым убрав между ними отступы.



ul {
  font: 14px Verdana, sans-serif;
}

ul li {
  display: inline-block;
  width: 50px;
  border: 1px solid #E76D13;
}

  
Пункт 1
Пункт 2
Пункт 3
Пункт 4
Пункт 5





Вариант 7:

Не указывать закрывающие теги для li



ul {
  font: 14px Verdana, sans-serif;
}

ul li {
  display: inline-block;
  width: 50px;
  border: 1px solid #E76D13;
}

  
Пункт 1
  
Пункт 2
  
Пункт 3
  
Пункт 4
  
Пункт 5





Вариант 8:

Переместить закрывающую скобку на следующую строку



ul {
  font: 14px Verdana, sans-serif;
}

ul li {
  display: inline-block;
  width: 50px;
  border: 1px solid #E76D13;
}

  
Пункт 1
Пункт 2
Пункт 3
Пункт 4
Пункт 5





Вариант 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;
}

  
Пункт 1
  
Пункт 2
  
Пункт 3
  
Пункт 4
  
Пункт 5





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



  
Пункт 1
  
Пункт 2
  
Пункт 3
  
Пункт 4
  
Пункт 5





Источник: http://css-live.ru/articles/zagadochnye-otstupy-mezhdu-inlajn-blokami.html


Ответ 3

Помогло:


  Попробуйте указать код всех кнопок в одну строчку


Ответ 4

Более корректный ответ состоит в том, чтобы просто не использовать элементы с 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;
}

  
  
  
  
  
  
  
  
  
  





Через 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;
}