Как убрать пробел между элементами inline-block?

Question

С учетом этого HTML и CSS:

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}

<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

В результате между элементами SPAN будет пространство шириной 4 пикселя.

Демонстрация: http://jsfiddle.net/dGHFV/

Я понимаю, почему это происходит, и я также знаю, что я мог бы избавиться от этого пространства, удалив пробел между элементами SPAN в исходном коде HTML, например:

<p>
    <span> Foo </span><span> Bar </span>
</p>

Однако я надеялся на CSS-решение, которое не требует подмены исходного кода HTML.

Я знаю, как решить эту проблему с помощью JavaScript - удалив текстовые узлы из контейнераэлемент (абзац), например, так:

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

Демо: http://jsfiddle.net/dGHFV/1/

Но можно ли решить эту проблему с помощью только CSS?

Answer 1

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

Давайте не будем забывать реальный вопрос, который был задан:

Как убрать пробел между элементами inline-block ? Я надеялся, что для решения CSS, которое не требует, чтобы исходный код HTML был подделаны. Можно ли решить эту проблему с помощью только CSS?

можно решить эту проблему только с помощью CSS, но полностью надежных исправлений CSS не существует.

Решение, которое я имел в своем первоначальном ответе, состояло в том, чтобы добавить font-size: 0 к родительскому элементу, а затем объявить разумное значение font-size для дочерних элементов.

http://jsfiddle.net/thirtydot/dGHFV/1361/

Это работает в последних версиях всех современных браузеров. Это работает в IE8. Он не работает в Safari 5, но работает в Safari 6. Safari 5 - практически мертвый браузер ( 0,33%, август 2015 ).

Большинство возможных проблем с относительными размерами шрифтов не сложно исправить.

Однако, хотя это разумное решение, если вам особенно нужно исправление только для CSS, я не рекомендую, если вы свободны изменять свой HTML (как большинство из нас).

---

Вот что я, как опытный веб-разработчик, на самом деле делаю, чтобы решить эту проблему:

<p>
    <span>Foo</span><span>Bar</span>
</p>

Да, все верно. Я удаляю пробел в HTML между элементами inline-block.

Это просто. Это просто. Это работает везде. Это прагматичное решение.

Иногда вам нужно тщательно обдумать, откуда появятся пробелы. Будет ли добавление другого элемента с помощью JavaScript добавлять пробелы? Нет, если вы не сделаете это правильно.

Давайте отправимся в волшебное путешествие по различным способам удаления пробелов с новым HTML:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

• Вы можете сделать это, как я обычно делаю:

  <ul>
      <li>Item 1</li><li>Item 2</li><li>Item 3</li>
  </ul>
  

  http://jsfiddle.net/thirtydot/dGHFV/1362/

• Или это:

  <ul>
      <li>Item 1</li
      ><li>Item 2</li
      ><li>Item 3</li>
  </ul>
  

• Или используйте комментарии:

  <ul>
      <li>Item 1</li><!--
      --><li>Item 2</li><!--
      --><li>Item 3</li>
  </ul>
  

• Или, если вы используете PHP или аналогичный:

  <ul>
      <li>Item 1</li><?
      ?><li>Item 2</li><?
      ?><li>Item 3</li>
  </ul>
  

• Или, вы можете даже пропустить определенные закрывающие теги целиком (все браузеры в порядке с этим):

  <ul>
      <li>Item 1
      <li>Item 2
      <li>Item 3
  </ul>
  

Теперь, когда я ушел и утомил вас до смерти "тысячей различных способов удаления пробелов с помощью тридцати точек", надеюсь, вы забыли все о font-size: 0.

---

В качестве альтернативы, вы теперь можете использовать flexbox для достижения многих макетов, которые вы, возможно, ранее использовали для встроенного блока: https://css -tricks.com / snippets / css / a- руководство к Flexbox /

Answer 2

Для браузеров, соответствующих CSS3, есть white-space-collapsing:discard

см .: http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing

Answer 3

Хорошо, хотя я проголосовал за ответы font-size: 0; и not implemented CSS3 feature, после попытки выяснить, что ни один из них не является реальным решением .

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

Тогда Я решил удалить пробелы (это ответ об этом аргументе) между inline-block divs из моего HTML источника(JSP), превращая это:

<div class="inlineBlock">
    I'm an inline-block div
</div>
<div class="inlineBlock">
    I'm an inline-block div
</div>

в это

<div class="inlineBlock">
    I'm an inline-block div
</div><div class="inlineBlock">
    I'm an inline-block div
</div>

, что уродливо, но работает.

Но, подождите минуту ...что если я создаю свои div внутри Taglibs loops (Struts2, JSTL и т. д.)?

Например:

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour">
        <s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}">
            <div class="inlineBlock>
                I'm an inline-block div in a matrix 
                (Do something here with the pushed object...)
           </div>
       </s:push>
    </s:iterator>
</s:iterator>

Встраивать все эти вещи совершенно не мыслимо, это будет означать

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour"><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div></s:push></s:iterator>
</s:iterator>

, который не читается, трудно поддерживается ипонять и т.д. ...

Решение, которое я нашел:

использовать комментарии HTML, чтобы связать конец одного деления с началом следующего!

<s:iterator begin="0" end="6" status="ctrDay">
   <br/>
   <s:iterator begin="0" end="23" status="ctrHour"><!--
    --><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><!--
        --><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div><!--
    --></s:push><!--
--></s:iterator>
</s:iterator>

Таким образом, у вас будет читаемый и правильно кодированный отступ.

И, как положительный побочный эффект, HTML source, хотя и наполненный пустыми комментариями, будетрезультат правильно с отступом;

давайте рассмотрим первый пример.По моему скромному мнению, это:

    <div class="inlineBlock">
        I'm an inline-block div
    </div><!--
 --><div class="inlineBlock">
        I'm an inline-block div
    </div>

лучше, чем это:

    <div class="inlineBlock">
         I'm an inline-block div
    </div><div class="inlineBlock">
         I'm an inline-block div
    </div>

Answer 4

Добавить комментариев между элементами, чтобы НЕ иметь пробел. Для меня это проще, чем сбросить размер шрифта на ноль и затем установить его обратно.

<div>
    Element 1
</div><!--
--><div>
    Element 2
</div>

Answer 5

Все методы устранения пробелов для display:inline-block - мерзкие хаки ...

Использование Flexbox

Это круто, решает все этовстроенный блочный макет bs, и по состоянию на 2017 год поддержка браузеров 98% (больше, если вам не нужны старые IE).

• Готовы ли мы использовать Flexbox?
• Использование гибких блоков CSS - Руководство для веб-разработчиков |MDN
• Полное руководство по Flexbox |CSS-хитрости
• Flexy Boxes - CSS flexbox площадка и инструмент для генерации кода

Answer 6

Это тот же ответ, который я дал в отношении: Отображение: встроенный блок - что это за пространство?

На самом деле существует очень простой способ удаления пробелов из встроенного блокаэто и легко, и семантично.Он называется нестандартным шрифтом с пробелами нулевой ширины, который позволяет свернуть пробел (добавленный браузером для встроенных элементов, когда они находятся на отдельных строках) на уровне шрифта с использованием очень маленького шрифта.После того, как вы объявите шрифт, вы просто измените font-family на контейнере и снова вернетесь на дочерние элементы, и вуаля.Вот так:

@font-face{ 
    font-family: 'NoSpace';
    src: url('../Fonts/zerowidthspaces.eot');
    src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/zerowidthspaces.woff') format('woff'),
         url('../Fonts/zerowidthspaces.ttf') format('truetype'),
         url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}

body {
    font-face: 'OpenSans', sans-serif;
}

.inline-container {
    font-face: 'NoSpace';
}

.inline-container > * {
    display: inline-block;
    font-face: 'OpenSans', sans-serif;
}

Костюм по вкусу.Вот загрузка шрифта, который я только что приготовил в font-forge и конвертировал с помощью генератора веб-шрифтов FontSquirrel.У меня ушло всего 5 минут.Включено объявление css @font-face: зашифрованный шрифт нулевой ширины .Он находится на Google Диске, поэтому вам нужно нажать «Файл»> «Загрузить», чтобы сохранить его на своем компьютере.Возможно, вам также потребуется изменить пути к шрифту, если вы скопируете объявление в ваш основной файл CSS.

Answer 7

Добавить display: flex; к родительскому элементу.Вот решение с префиксом:

p {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: blue;
  font-size: 30px;
  color: white;
  text-align: center;
}

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

---

Обновление

Упрощенная версия 101

p {
  display: flex;
}

span {
  width: 100px;
  background: tomato;
  font-size: 30px;
  color: white;
  text-align: center;
}

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

Answer 8

Еще две опции на основе Текстовый модуль CSS уровня 3 (вместо white-space-collapsing:discard, который был исключен из черновика спецификации):

• word-spacing: -100%;

Теоретически, он должен делать именно то, что нужно - сократить пробелы между «словами» на 100% ширины символа пробела, то есть до нуля.Но, похоже, нигде не работает, к сожалению, и эта функция помечена как «подверженная риску» (ее также можно исключить из спецификации).

• word-spacing: -1ch;

Сокращает пробелы между словами на ширину цифры «0».В моноширинном шрифте он должен быть точно равен ширине символа пробела (и любого другого символа также).Это работает в Firefox 10+, Chrome 27+ и почти работает в Internet Explorer 9+.

Fiddle

Answer 9

К сожалению, это 2019 год, и white-space-collapse все еще не реализован.

Тем временем, присвойте родительскому элементу font-size: 0; и установите font-size для дочерних элементов.Это должно сделать трюк

Answer 10

Используйте flexbox и сделайте запасной вариант (из предложений выше) для старых браузеров:

ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}