css display: inline или display: inline-inline-block без промежутков

Question

Есть стиль display: inline, который позволяет div-ы размещать в линию. Он работает, но вставляет между элементами пространство. Как его убрать?

.conteiner div {
  display: inline;
}

.conteiner div button {
  width: 100px;
  height: 20px;
}

<html>
<head></head>
<body>
  <div class=conteiner>
    <div><button></button></div>
    <div><button></button></div>
  </div>
</body>
</html>

Answer 1

Как вариант, просто записать div'ы в одну строку:

  
.conteiner div{
  display: inline;
}

.conteiner div button{
  width: 100px;
  height: 20px;
}

<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class=conteiner>
    <div><button></button></div><div><button></button></div>
  </div>
</body>
</html>

Answer 2

Когда в разметке между блоками есть пространство, то и в браузере будет промежуток, ширина которого зависит от размера шрифта. Например для шрифта 14px - этот промежуток всегда будет равен 4px.

Пути решения:

.conteiner div {
  display: inline;
}

.conteiner div button {
  width: 100px;
  height: 20px;
}

.conteiner div .margin--4 {
  margin-right: -4px;
}

.font-size-0 {
  font-size: 0;
}

.font-size-0 .button {
  font-size: 14px;
}

<!-- Заполнение пустого пространства комментарием -->
<div class="conteiner">
  <div><button></button></div><!--
  --><div><button></button></div><!--
  --><div><button></button></div>
</div>

<!-- Отрицательный отступ справа -->
<div class="conteiner">
  <div><button class="margin--4"></button></div>
  <div><button class="margin--4"></button></div>
  <div><button class="margin--4"></button></div>
</div>

<!-- Растягивание закрывающего тега -->
<div class="conteiner">
  <div><button></button></div
  ><div><button></button></div
  ><div><button></button></div>
</div>

<!-- Установка нулевого размера шрифта для блоков -->
<div class="conteiner font-size-0">
  <div><button></button></div>
  <div><button></button></div>
  <div><button></button></div>
</div>

БЛОГ НА HUSL

css display: inline или display: inline-inline-block без промежутков

Ответы (2 шт):