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


1068

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


Смотрите мой ответ в этом вопросе для полного набора параметров, соответствующих сейчас: stackoverflow.com/questions/14630061/…
ktamlyn


Ответы:


1006

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

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

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


7
Работает в FF3.6, IE9RC, O11, Ch9. Тем не менее, в Safari 5 все еще остается разрыв в 1px:(
Шиме Видас

7
@thirtydot Не могли бы вы проверить комментарий этого ответа . Вполне возможно, что этот font-size:0трюк не очень хорошая идея в конце концов ...
Шиме Видас

25
Я знаю, что автор ищет решение CSS, но это решение, которое на сегодняшний день является наиболее проголосовавшим (30 голосов против 5, когда я пишу это), имеет сильные побочные эффекты и даже не работает в кросс-браузерной среде. На этом этапе более прагматично просто удалить проблемные пробелы в вашем HTML.
Стеф Тирион

10
Это решение работает, только если вы не работаете с EM для контейнеров вашего размера
meo

6
Это разбивает дочерние элементы с относительными размерами шрифта.
Даниил

156

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

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


Разве вы не хотите использовать, trim-innerа не discard?
Спб

49
Это было удалено из текстового уровня 3, но текстовый уровень 4 имеет . Уже 2016 год и до сих пор нет поддержки. text-space-collapse:discard
Ориоль

1
@MrLister: другие решения работают не во всех случаях. Например, я не знаю ни о каком решении, которое уберет конечный пробел, из <p>A long text...</p>которого открывающие и закрывающие теги находятся на отдельных строках, чем текстовое содержимое. Это то, что я делаю все время, чтобы мои HTML-файлы были аккуратными и читаемыми.
Роберт Кушнье,

@ Робертfloat
мистер Листер

@MrLister Floating действительно удаляет завершающий пробел, но имеет серьезные побочные эффекты - полностью меняет положение элемента в макете контейнера. Как мне это сделать, когда плавающий элемент разрушает мою раскладку (как это обычно бывает)?
Роберт Кушнье

94

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

сегодня мы должны просто использовать 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>

1
Обратите внимание, что это также может нарушить функциональность свертывания кода в вашем редакторе.
jknotek

44

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

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

Это хак, который мы не должны использовать в 2020 году: используйте вместо этого flexbox caniuse.com/#feat=flexbox
tonygatta

ответ был написан в 2013 году. И хотя flexbox не является ответом на вопрос, этот также не работает, но тоже работает: stackoverflow.com/a/37512227/1019850
Дэвид

42

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

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

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


1
Хакерский хак может быть, но размер шрифта: 0 работает на 100% браузеров и применяет отображение: inline-flex по-прежнему не избавляется от лишних пробелов, даже в браузере, который его поддерживает!
Патрик

@patrick Flexbox определенно решает проблему, вы просто делаете это неправильно. inline-flex не предназначен для отображения встроенных элементов flex - он применяется только к контейнерам. См. Stackoverflow.com/a/27459133/165673
Ярин

7
«font-size: 0» не работает на 100% браузеров. (минимальный размер шрифта в настройках браузера). И этот ответ действительно хорош.
ViliusL

35

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


1
Это отличный ответ! Хотя, я думаю, было бы неплохо поставить упрощенную версию сверху, чтобы читатель увидел ее первым. Или, может быть, даже удалить не упрощенную версию.
Stefnotch

1
@ Stefnotch Готово ✅ Спасибо за ваше ценное предложение :-)
Пн

31

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

На самом деле существует действительно простой способ удаления пробелов из встроенного блока, который является простым и семантическим. Он называется нестандартным шрифтом с пробелами нулевой ширины, который позволяет свернуть пробел (добавленный браузером для встроенных элементов, когда они находятся на отдельных строках) на уровне шрифта с использованием очень маленького шрифта. После того, как вы объявите шрифт, вы просто меняете 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.


1
Я думаю, вы видели это в CSS Tricks , и для меня это отличный ответ. Это легкий, простой в реализации и кросс-браузерный (насколько показали мои тесты). Я полностью работал с flexbox, пока не понял, что Firefox не будет поддерживать, flex-wrapпо крайней мере, до v28 ( srsly? ), Но до тех пор это был идеальный запасной вариант.
Indextwo

16
Это худший случай перегиба, который я видел за долгое время. Скачать весь шрифт только для удаления пробела? Geez.
Мистер Листер

3
@MrLister вы понимаете, что такой файл шрифта крошечный? Это не имеет никаких символов внутри. Я бы посоветовал включить его в любом случае в кодировку base64, чтобы мы также избавились от запроса.
Роберт Коритник

Это имеет тот же фатальный недостаток, что и пиктограммные шрифты, то есть он не будет работать, когда веб-шрифты либо заблокированы (например, из-за пропускной способности или по соображениям безопасности), либо перезаписаны пользовательскими шрифтами (например, по причинам здоровья, таким как дислексия и т. Д.).
tomasz86

22

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

  • word-spacing: -100%;

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

  • word-spacing: -1ch;

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

скрипка


+1 для межсловного интервала, хотя -0.5ch - правильное значение, текст -1ch без пробелов не будет читаться, -0.5ch ведет себя так же, как font-size: 0; с явным заданным размером для текстовых элементов. :)
Dennis98

6
@ Dennis98, -1ch работает только для моноширинных шрифтов (например, Courier New), потому что все их символы имеют одинаковую ширину, включая ' 'и '0'. В немоно-космических шрифтах нет подходящей магической пропорции между шириной ' 'и '0'символами, поэтому chэто не очень полезно.
Илья Стрельцын

вместо этого word-spacingмы могли бы использовать letter-spacingс произвольным большим отрицательным значением, как показано в моем ответе
S.Serpooshan

20

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

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


16

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

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

13

Просто:

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

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

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

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

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


0.25em - это не «интервал между словами по умолчанию», это ширина пробела в шрифте Times New Roman, который в некоторых популярных операционных системах оказывается шрифтом по умолчанию. Другие популярные шрифты, такие как Helvetica, часто имеют более широкий символ пробела, поэтому удаление только 0,25 метра из них будет недостаточным для устранения пробелов.
Илья Стрельцын

12

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

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


вместо того, -4pxдля letter-spacingкоторого может быть недостаточно для больших размеров шрифта, например: смотрите эту скрипку , мы могли бы использовать большее значение, как в моем посте
S.Serpooshan

12

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

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

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

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


Хотя технически это не ответ на вопрос «могу ли я сделать это с помощью встроенного блока», это кажется мне элегантным решением ...
Лукас,

10

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

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

    float: left;
}

И сделано.


9

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

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


недостатком этого метода является то, что нам нужно знать и повторять размер шрифта по умолчанию (например, 14px), чтобы вернуть его в нормальное состояние в дочерних элементах!
С.Серпушан

8

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


7

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>


1
Хотя этот фрагмент кода может решить вопрос, в том числе объяснение действительно помогает улучшить качество вашего сообщения. Помните, что вы отвечаете на вопрос читателей в будущем, и эти люди могут не знать причин, по которым вы предлагаете код. Также постарайтесь не переполнять ваш код пояснительными комментариями, это снижает удобочитаемость кода и пояснений!
Ашиш Ахаджа

Я предполагаю, что floatи display:inline-blockдля spans должны были быть запасные варианты для случая, если flexон не поддерживается, но floatон фактически отбрасывает эффект inline-block, поэтому последний кажется избыточным.
Илья Стрельцын

6

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

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

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

http://cdpn.io/dKIjo


В Firefox для Android я вижу пространство в 1 пиксель между полями.
Шиме Видас

5

Я думаю, что есть очень простой / старый метод для этого, который поддерживается всеми браузерами, даже 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>


То же самое происходит и здесь, вам нужно установить letter-spacing:normalвсе дочерние элементы.
Гаурав Аггарвал

@GauravAggarwal, но letter-spacingв 99,99% случаев normal. размер шрифта не имеет такого фиксированного значения и сильно зависит от дизайна. это может быть небольшое или большое значение, основанное на семействе шрифтов и других вещах ... Никогда в своей жизни я не помню, чтобы видеть / использовать специальное значение (отличное от 0 / нормальное) letter-spacing, поэтому я думаю, что это безопаснее и лучший выбор
С.Серпушан

я не согласен с этим ... использование межбуквенного интервала к нормальному значению со всеми элементами и использование размера шрифта тоже (при необходимости) совсем не полезно, так как вы пишете двойной код, где вам нужно изменить размер шрифта. Использование размера шрифта не приведет к двойному коду и может быть использовано o стандартного размера и любого другого нестандартного размера. Я предлагаю вам сделать Google и проверить, используя размер шрифта является наиболее приемлемой вещью в эти дни. Решение меняется со временем :)
Гаурав Аггарвал

я не могу понять, что вы подразумеваете под "... и использование размера шрифта (если необходимо) совсем не полезно, так как вы пишете двойной код, когда вам нужно изменить размер шрифта". в моем посте нет настройки размера шрифта! все, что я делал, это межбуквенный интервал, который обычно никто не устанавливал в своем css (это всегда нормально). и поскольку мы не меняем размер шрифта, нам не нужно знать исходный размер шрифта, чтобы установить его обратно
S.Serpooshan

Я предполагаю, что этот метод не стал популярным прежде, потому что он не работал в Opera / Presto. И в настоящее время у нас есть другие варианты, которым такие обходные пути не нужны, например, использование Flexbox вместо встроенных блоков.
Илья Стрельцын,



2

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


4
Это не будет работать, если пользователь изменит размер шрифта по умолчанию в своем браузере. Лучше использовать -0.25em.
Мартин Шнайдер

1

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

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

p {
  text-space-collapse: discard;
}

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


1

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

span {
    display: table-cell;
}

этот вопрос о встроенном блоке.
Мадан Бхандари

@MadanBhandari правильно, но, похоже, избавляет от необходимости всех грязных хаков.
Дэвид

1

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

Вот Плункер .


не работает без поплавка - чего нет в вашем поршне. Так что «пробел: сейчас» никогда не кажется рабочим ответом.
Дэвид

1

Есть много решений , как 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 и нашел это:

длина

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

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


1

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


1

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


Просто комментирование, указывающее на то, что содержимое display:gridэлемента блокируется, поэтому не столько отображение: сетка помогает вам работать с макетами inline-block, а скорее позволяет заменить работу inline-blockчем-то, где вы можете управлять «желобами», как этот вопрос хочет. Кроме того, я действительно удивлен, что до сих пор никто не ответил с помощью CSS Grid Layout.
TylerH

Проясню это изменение от inline-block. И да, я тоже был удивлен, думаю, никто с gridопытом не приходил к этому раньше. Играл с ним вокруг немного , и наткнулся на этот вопрос так думали , почему нет: P
Stewartside

0

Еще один способ, который я нашел, это применение поля 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

Каждый вопрос, который пытается удалить пространство между 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>

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.