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

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

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

Хорошо, хотя я поддерживал как ответы 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>

что является уродливым, но работает.

Но подождите минутку... что, если я создаю свои divs внутри 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, хотя он заражен пустым комментарием, будет выглядеть правильно отступом;

возьмем первый пример, imho this:

    <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

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

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

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

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

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

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

Обновить

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

p {
  display: flex;
}

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

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

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

• word-spacing: -100%;

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

• word-spacing: -1ch;

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

скрипка

К сожалению, это 2015 и white-space-collapse по-прежнему не реализованы.

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

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

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

Хотя, технически не ответ на вопрос: "Как удалить пространство между элементами встроенного блока?"

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

  p {  дисплей: flex;  flex-direction: row;
}
Код>

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

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

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

Простой:

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

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

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

0.25em является значением по умолчанию word-spacing

W3Schools - свойство word-spacing

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

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 - это вы, сумасшедший? - Итак, в моем случае у меня есть Eric Meyer CSS reset и с font-size:0.01em; У меня есть разница в 1 пиксель от Internet Explorer 7 до Firefox 9, поэтому я думаю, что это может быть решением.

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

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

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

http://cdpn.io/dKIjo

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

С помощью скобок PHP:

ul li {
  display: inline-block;
}

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

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

CSS

float: left;

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

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

Используйте один из этих трюков

1. Удалить пробелы
2. Отрицательная маржа
3. Пропустить закрывающий тег (HTML5 все равно)
4. Установите размер шрифта равным нулю (пробел с нулевым размером шрифта равен... нулевой ширине)
5. Используйте flexbox

Смотрите код ниже:

body {
  font-family: sans-serif;
  font-size: 16px;
}

ul {
  list-style: none
}

li {
  background: #000;
  display: inline-block;
  padding: 4px;
  color: #fff;
}

ul.white-space-fix li {
  margin-right: -4px;
}

ul.zero-size {
  font-size: 0px;
}

ul.zero-size li {
  font-size: 16px;
}

ul.flexbox {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

original...
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

Funky code formatting...
<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

Adding html comments...
<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>

CSS margin-right: -4px;
<ul class="white-space-fix">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

Omitting the &lt;/li&gt;
<ul>
  <li>one
    <li>two
      <li>three
</ul>

fixed with font-size: 0
<br><br>
<ul class="zero-size">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

<br> flexbox
<br>
<ul class="flexbox">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

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

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

длина

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

Похоже, это и есть причина.

Я получаю хорошее решение:

напишите следующий стиль:

.flex-box {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

и добавьте класс в тег, который содержит элемент inline-block.

Просто для удовольствия: простое решение для JavaScript.

document.querySelectorAll('.container').forEach(clear);

function clear(element) {
  element.childNodes.forEach(check, element);
}

function check(item) {
  if (item.nodeType === 3) this.removeChild(item);
}

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

<p class="container">
  <span> Foo </span>
  <span> Bar </span>
</p>

Я опробовал решение font-size: 0 для аналогичной проблемы в React и Sass для проекта Free Code Camp. Я сейчас работая через.

И он работает!

Сначала script:

var ActionBox = React.createClass({
    render: function() {
        return(
            <div id="actionBox">
                </div>
        );
    },
});

var ApplicationGrid = React.createClass({
    render: function() {
        var row = [];
        for(var j=0; j<30; j++){
            for(var i=0; i<30; i++){
                row.push(<ActionBox />);
            }
        }
        return(
            <div id="applicationGrid">
                {row}
            </div>
        );
     },
});

var ButtonsAndGrid = React.createClass({
    render: function() {
        return(
            <div>
                <div id="buttonsDiv">
                </div>
                <ApplicationGrid />
            </div>
        );
    },
});

var MyApp = React.createClass({
    render: function() {
        return(
            <div id="mainDiv">
                <h1> Game of Life! </h1>
                <ButtonsAndGrid />
            </div>
        );
    },
});

ReactDOM.render(
    <MyApp />,
    document.getElementById('GoL')
);

Затем, Sass:

html, body
    height: 100%

body
    height: 100%
    margin: 0
    padding: 0

#mainDiv
    width: 80%
    height: 60%
    margin: auto
    padding-top: 5px
    padding-bottom: 5px
    background-color: DeepSkyBlue
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#buttonsDiv
    width: 80%
    height: 60%
    margin: auto
    margin-bottom: 0px
    padding-top: 5px
    padding-bottom: 0px
    background-color: grey
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#applicationGrid
    width: 65%
    height: 50%
    padding-top: 0px
    margin: auto
    font-size: 0
    margin-top: 0px
    padding-bottom: 5px
    background-color: white
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#actionBox
    width: 20px
    height: 20PX
    padding-top: 0px
    display: inline-block
    margin-top: 0px
    padding-bottom: 0px
    background-color: lightgrey
    text-align: center
    border: 2px solid grey
    margin-bottom: 0px

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

Итак, в отношении вашего примера вам просто нужно написать следующее:

p {
  text-space-collapse: discard;
}

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

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

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

Вот и все. В других языках по аналогии

Попробуйте добавить float:left; http://jsfiddle.net/dGHFV/3/

В CSS есть простое решение. Например:

HTML

<p class="parent">
    <span class="children"> Foo </span>
    <span class="children"> Bar </span>
</p>

CSS

.parent {
    letter-spacing: -.31em;
    *letter-spacing: normal;
    *word-spacing: -.43em;
}
.children {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
}

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

Вы можете проверить эту структуру в этой ссылке purecss. Наслаждайтесь:)

.row {
    letter-spacing: -.31em;
    *letter-spacing: normal;
    *word-spacing: -.43em;

    /* For better view */
    background: #f9f9f9;
    padding: 1em .5em;
}

.col {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;

    /* For better view */
    padding: 16px;
    background: #dbdbdb;
    border: 3px #bdbdbd solid;
    box-sizing: border-box;
    width: 25%;
}

<div class="row">

    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>

</div>

Другим способом, который я нашел, является применение 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;
}

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

span {
    display: table-cell;
}

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

Удалите пробелы из встроенных элементов блока. Существует много способов:

• Отрицательный запас

  div a {
      display: inline - block;
      margin - right: -4 px;
  }
  

• Размер шрифта до нуля

  nav {
      font - size: 0;
  }
  nav a {
      font - size: 16 px;
  }
  

• Пропустить закрывающий тег

  < ul >
      < li > one
      < li > two
      < li > three
  < /ul>
  

Попробуйте этот фрагмент:

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

Рабочая демонстрация: http://jsfiddle.net/dGHFV/2784/

Так много сложных ответов. Самый простой способ, который я могу придумать, - просто дать одному из элементов отрицательный запас (либо margin-left, либо margin-right в зависимости от положения элемента).