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

1198
Šime Vidas 22 Фев 2011 в 15:41

30 ответов

Лучший ответ

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

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

Как убрать пробел между строковыми блочными элементами ? Я надеялся для решения 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 между элементами встроенного блока.

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

Иногда вам нужно тщательно продумать, откуда берутся пробелы. Добавит ли еще один элемент с помощью 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 для достижения многих макетов, которые вы, возможно, ранее использовали inline-block для: < a href = "https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel = "noreferrer"> https://css-tricks.com/snippets/css/a-guide -to-flexbox /

1083
NateS 6 Апр 2019 в 13:00

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

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

163
Josh Crozier 16 Окт 2013 в 16:56

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


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

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

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

Затем я решил удалить пробелы (этот ответ касается этого аргумента) между блоками inline-block из моего 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>
101
TylerH 26 Фев 2021 в 19:18

Добавьте 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>
57
Mo. 16 Апр 2020 в 13:00

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

<div>
    Element 1
</div><!--
--><div>
    Element 2
</div>
48
Radek 13 Мар 2013 в 12:02

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

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

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

47
Yarin 27 Апр 2017 в 01:49

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

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

30
Community 23 Май 2017 в 12:26

Еще два варианта, основанные на текстовом модуле CSS уровня 3 (вместо < a href = "https://stackoverflow.com/a/5078350/2533215"> white-space-collapsing:discard , который был исключен из проекта спецификации):

  • word-spacing: -100%;

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

  • word-spacing: -1ch;

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

Скрипка

23
Peter Mortensen 8 Янв 2018 в 23:54

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

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

21
dipole_moment 30 Апр 2019 в 20:24

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

ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
17
Peter Mortensen 8 Янв 2018 в 23:55

Просто:

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

Прикасаться к родительскому элементу не нужно.

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

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

W3Schools - свойство межсловного интервала

15
Peter Mortensen 9 Янв 2018 в 00:00

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

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

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

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

14
Cyan Baltazar 10 Апр 2018 в 06:49

Размер шрифта: 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/

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

13
Eric 28 Сен 2015 в 15:23

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

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

11
Peter Mortensen 8 Янв 2018 в 23:59

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

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

    float: left;
}

И сделано.

11
Peter Mortensen 9 Янв 2018 в 00:13

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

9
Peter Mortensen 8 Янв 2018 в 23:52
p {
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: red;
  font-size: 30px;
  color: white;
}
<p>
  <span> hello </span>
  <span> world </span>
</p>
8
wsc 1 Фев 2016 в 05:06

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

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

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

http://cdpn.io/dKIjo

7
StephenESC 2 Окт 2013 в 14:28

Я думаю, что для этого есть очень простой / старый метод, который поддерживается всеми браузерами, даже IE 6/7. Мы могли бы просто установить letter-spacing на большое отрицательное значение в родительском элементе, а затем вернуть его на 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>
6
S.Serpooshan 27 Янв 2018 в 06:01

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

Css

float: left;

Ссылка codepen: http://jsfiddle.net/dGHFV/3560/

5
Gokul 10 Июл 2018 в 18:24

С скобками PHP:

ul li {
  display: inline-block;
}
    <ul>
        <li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li>
    </ul>
4
Peter Mortensen 9 Янв 2018 в 00:13

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

2
Ashish Ahuja 9 Июн 2016 в 12:42

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

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

p {
  text-space-collapse: discard;
}

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

1
Community 23 Май 2017 в 12:03

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

span {
    display: table-cell;
}
1
Peter Mortensen 9 Янв 2018 в 00:00

Добавьте 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>

Вот Plunker.

1
Peter Mortensen 9 Янв 2018 в 00:02

Существует множество решений, таких как 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), вы можете увидеть следующее:

enter image description here

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

enter image description here

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

длина

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

Похоже, причина в этом.

1
Community 20 Июн 2020 в 09:12

Добавьте letter-spacing:-4px; в родительский p CSS и добавьте letter-spacing:0px; в свой span CSS.

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>
1
Mark Salvania 7 Сен 2018 в 22:04

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

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

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

CSS Grid также очень гибок и объединяет все полезные части элементов 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>
1
Stewartside 14 Окт 2019 в 15:48

Отрицательная маржа

Вы можете переместить элементы обратно на место с отрицательным полем в 4 пикселя (может потребоваться корректировка в зависимости от размера шрифта родительского элемента). Очевидно, это проблематично в старых версиях IE (6 и 7), но если вам не нужны эти браузеры, по крайней мере, вы можете сохранить чистое форматирование кода.

span {
  display: inline-block;
  margin-right: -4px;
}
1
AminFarajzadeh 7 Май 2020 в 07:51

Еще один способ, который я нашел, - это применение margin-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;
}
0
Sukhminder Parmar 15 Сен 2016 в 04:16