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

Учитывая этот 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?

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

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

Как убрать пробел между элементами 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-guide-to-flexbox/

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

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

РЕДАКТИРОВАТЬ:

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

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

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

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

Затем я решил удалить пробелы (это ответы об этом аргументе) между inline-blockdiv-ами из моего 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, чтобы соединить конец одного div с началом следующего!

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

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

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

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

Используйте Flexbox

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

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

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

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

p {
  display: flex;
}

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

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

Исправить с префиксом 👇

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>

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

На самом деле существует действительно простой способ удаления пробелов из встроенного блока, который является простым и семантическим. Он называется нестандартным шрифтом с пробелами нулевой ширины, который позволяет свернуть пробел (добавленный браузером для встроенных элементов, когда они находятся на отдельных строках) на уровне шрифта с использованием очень маленького шрифта. После того, как вы объявите шрифт, вы просто меняете 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 минут. Включено @font-faceобъявление css : заархивированный шрифт пробела нулевой ширины . Он находится на Google Диске, поэтому вам нужно нажать «Файл»> «Загрузить», чтобы сохранить его на своем компьютере. Возможно, вам также потребуется изменить пути к шрифту, если вы скопируете объявление в ваш основной файл CSS.

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

• word-spacing: -100%;

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

• word-spacing: -1ch;

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

скрипка

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

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

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

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

Просто:

item {
  display: inline-block;
  margin-right: -0.25em;
}

Нет необходимости прикасаться к родительскому элементу.

Единственное условие здесь: размер шрифта элемента не должен быть определен (должен быть равен размеру шрифта родителя).

0.25em по умолчанию word-spacing

W3Schools - пространственное слово

Размер шрифта: 0; может быть немного сложнее управлять ...

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

.inline-block-wrapper>.inline-block-wrapper,
.inline-block-wrapper{letter-spacing: -4px;}
.inline-block-wrapper>*{letter-spacing: 0;display: inline-block;}

/* OR better shorter name...*/
.items>.items,
.items{letter-spacing: -4px;}
.items>*{letter-spacing: 0;display: inline-block;}

Тогда вы можете использовать его следующим образом ...

<ul class="items">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

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

ОБЪЯСНЕНИЕ :

Это работает (возможно, -3px может быть лучше) именно так, как вы ожидаете, что это сработает.

• Вы копируете и вставляете код (один раз)
• тогда в вашем html просто используйте class="items"родительский элемент каждого встроенного блока.

Вам НЕ нужно возвращаться к CSS и добавлять другое правило CSS для ваших новых встроенных блоков.

Решение двух вопросов одновременно.

Также обратите внимание, что >(больше, чем знак) это означает, что * / все дочерние элементы должны быть встроены в блок.

http://jsfiddle.net/fD5u3/

ПРИМЕЧАНИЕ: я изменил, чтобы приспособить, чтобы наследовать межбуквенный интервал, когда у оболочки есть дочерняя оболочка.

Хотя технически это не ответ на вопрос: «Как убрать пробел между элементами inline-block?»

Вы можете попробовать решение flexbox и применить приведенный ниже код, и место будет удалено.

p {
   display: flex;
   flex-direction: row;
}

Вы можете узнать больше об этом по этой ссылке: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Я не совсем уверен, хотите ли вы сделать два синих пролета без пробела или хотите обработать другие пробелы, но если вы хотите устранить пробел:

span {
    display: inline-block;
    width: 100px;
    background: blue;
    font-size: 30px;
    color: white;
    text-align: center;

    float: left;
}

И сделано.

Обычно мы используем такие элементы в разных строках, но в случае display:inline-block использования тегов в одной строке удалит пробел, а в другой строке - нет.

Пример с тегами в другой строке:

p span {
  display: inline-block;
  background: red;
}

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

Пример с тегами в одной строке

p span {
  display: inline-block;
  background: red;
}

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

Другой эффективный метод - это CSS-задание, которое используется font-size:0для родительского элемента и дает font-sizeдочернему элементу столько, сколько вы хотите.

p {
  font-size: 0;
}
p span {
  display: inline-block;
  background: red;
  font-size: 14px;
}

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

Вышеуказанные методы могут не работать где-то в зависимости от всего приложения, но последний метод является надежным решением для этой ситуации и может использоваться где угодно.

У меня была эта проблема прямо сейчас, и font-size:0;я обнаружил, что в Internet Explorer 7 проблема остается, потому что Internet Explorer думает: «Размер шрифта 0?!?! WTF ты сумасшедший человек?» - Итак, в моем случае я сбросил CSS Эрика Мейера, и у font-size:0.01em;меня разница в 1 пиксель от Internet Explorer 7 до Firefox 9, поэтому я думаю, что это может быть решением.

Я занимался этим недавно, и вместо того, чтобы установить родителя, а font-size:0затем установить для дочернего элемента разумное значение, я получил согласованные результаты, установив родительский контейнер, а letter-spacing:-.25emзатем дочерний letter-spacing:normal.

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

Использование ems работает независимо от того, установлен ли размер шрифта 100%, 15pt или 36px.

http://cdpn.io/dKIjo

Я думаю, что есть очень простой / старый метод для этого, который поддерживается всеми браузерами, даже IE 6/7. Мы могли бы просто установить letter-spacingбольшое отрицательное значение в parent и затем установить его обратно normalна дочерние элементы:

body { font-size: 24px }
span { border: 1px solid #b0b0c0; } /* show borders to see spacing */

.no-spacing { letter-spacing: -1em; } /* could be a large negative value */
.no-spacing > * { letter-spacing: normal; } /* => back to normal spacing */

<p style="color:red">Wrong (default spacing):</p>

<div class="">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>

<hr/>

<p style="color:green">Correct (no-spacing):</p>

<div class="no-spacing">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>

Самый простой ответ на этот вопрос - добавить.

CSS

float: left;

ссылка на код: http://jsfiddle.net/dGHFV/3560/

С PHP скобками:

ul li {
  display: inline-block;
}

    <ul>
        <li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li>
    </ul>

Я собираюсь немного расширить ответ пользователя user5609829, так как считаю, что другие решения здесь слишком сложны / слишком много работы. Применение margin-right: -4pxк элементам встроенного блока удалит пробел и поддерживается всеми браузерами. Смотрите обновленную скрипку здесь . Для тех , кто связан с использованием отрицательных полей, попробуйте дать это чтение.

Спецификация CSS Text Module Level 4 определяетtext-space-collapse свойство, которое позволяет контролировать способ обработки пустого пространства внутри и вокруг элемента.

Итак, что касается вашего примера, вам просто нужно написать это:

p {
  text-space-collapse: discard;
}

К сожалению, ни один браузер не реализует это свойство (по состоянию на сентябрь 2016 года), как указано в комментариях к ответу HBP .

Я нашел чистое CSS-решение, которое очень хорошо работало для меня во всех браузерах:

span {
    display: table-cell;
}

Добавить white-space: nowrap к элементу контейнера:

CSS:

* {
    box-sizing: border-box;
}
.row {
    vertical-align: top;
    white-space: nowrap;
}
.column{
    float: left;
    display: inline-block;
    width: 50% // Or whatever in your case
}

HTML:

<div class="row">
    <div class="column"> Some stuff</div>
    <div class="column">Some other stuff</div>
</div>

Вот Плункер .

Есть много решений , как font-size:0, word-spacing, margin-left, letter-spacingи так далее.

Обычно я предпочитаю использовать, letter-spacingпотому что

1. Это нормально, когда мы присваиваем значение, которое больше ширины дополнительного пространства (например -1em).
2. Тем не менее, это не будет хорошо, word-spacingи margin-leftкогда мы устанавливаем большее значение, как -1em.
3. Использование font-sizeне удобно, когда мы пытаемся использовать emкак font-sizeединицу.

Так что, letter-spacingпохоже, лучший выбор.

Тем не менее, я должен предупредить вас

когда вы используете, letter-spacingвам лучше использовать -0.3emили -0.31emнет других.

* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: inherit;
  cursor: auto;
}
.nav {
  width: 260px;
  height: 100px;
  background-color: pink;
  color: white;
  font-size: 20px;
  letter-spacing: -1em;
}
.nav__text {
  width: 90px;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid black;
  line-height: 40px;
  background-color: yellowgreen;
  text-align: center;
  display: inline-block;
  letter-spacing: normal;
}

<nav class="nav">
    <span class="nav__text">nav1</span>
    <span class="nav__text">nav2</span>
    <span class="nav__text">nav3</span>
</nav>

Если вы используете Chrome (тестовая версия 66.0.3359.139) или Opera (тестовая версия 53.0.2907.99), то, что вы видите, может быть:

Если вы используете Firefox (60.0.2), IE10 или Edge, то, что вы видите, может быть:

Это интересно. Итак, я проверил mdn-letter-spacing и нашел это:

длина

Определяет дополнительное межсимвольное пространство в дополнение к стандартному пространству между символами. Значения могут быть отрицательными, но могут быть ограничения для конкретной реализации. Пользовательские агенты не могут дополнительно увеличивать или уменьшать межсимвольное пространство для выравнивания текста.

Кажется, в этом причина.

Добавьте letter-spacing:-4px;родительский pCSS и добавьте letter-spacing:0px;к своему spanCSS.

span {
  display:inline-block;
  width:100px;
  background-color:palevioletred;
  vertical-align:bottom;
  letter-spacing:0px;
}

p {
  letter-spacing:-4px;
}

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

Я думал, что добавлю что-то новое к этому вопросу, так как многие из представленных ответов более чем адекватны и актуальны, есть некоторые новые свойства CSS, которые могут обеспечить очень чистый вывод, с полной поддержкой во всех браузерах и мало нет "хаков". Это отходит, inline-blockно дает те же результаты, что и заданный вопрос.

Эти свойства CSS grid

CSS Grid высоко поддерживается ( CanIUse ), кроме IE, которому нужен только -ms-префикс, чтобы он мог работать.

CSS сетка является очень гибкой, и принимает все хорошие части из table, flexиinline-block элементы , и выводит их в одно место.

При создании gridвы можете указать промежутки между строками и столбцами. Разрыв по умолчанию уже установлен, 0pxно вы можете изменить это значение на любое другое.

Короче говоря, вот соответствующий рабочий пример:

body {
  background: lightblue;
  font-family: sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-column-gap: 0; /* Not needed but useful for example */
  grid-row-gap: 0; /* Not needed but useful for example */
}

.box {
  background: red;
}
.box:nth-child(even) {
  background: green;
}

<div class="container">
  <div class="box">
    Hello
  </div>
  <div class="box">
    Test
  </div>  
</div>

Еще один способ, который я нашел, это применение поля left в качестве отрицательных значений, кроме первого элемента строки.

span { 
 display:inline-block;
 width:100px;
 background:blue;
 font-size:30px;
 color:white; 
 text-align:center;
 margin-left:-5px;
}
span:first-child{
 margin:0px;
}

Каждый вопрос, который пытается удалить пространство между inline-blocks, кажется <table>мне ...

Попробуйте что-то вроде этого:

p {
  display: table;
}
span {
  width: 100px;
  border: 1px solid silver; /* added for visualization only*/
  display: table-cell;
}

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