Как удалить пространство между элементами встроенного блока?

Учитывая этот HTML и CSS:

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

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

Ответ 1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вы можете сделать это, как я обычно делаю:
```
<ul>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>
```
http://jsfiddle.net/thirtydot/dGHFV/1362/

Или это:

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

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

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

Или, если вы используете PHP или подобное:

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

Или, вы можете даже полностью пропустить некоторые закрывающие теги (все браузеры хорошо с этим):
```
<ul>
    <li>Item 1
    <li>Item 2
    <li>Item 3
</ul>
```

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

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

Ответ 2

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

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

Ответ 3

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

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

Затем я решил удалить пробелы (это ответы об этом аргументе) между inline-block элементами 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>

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

Но, подождите минутку... что если я создаю свои Taglibs loops внутри Taglibs loops Struts2 (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>

Ответ 4

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

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

Ответ 5

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

Использовать Flexbox

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

Ответ 6

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

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

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

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

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

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

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

Ответ 7

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

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

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

Ответ 8

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

word-spacing: -100%;

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

word-spacing: -1ch;

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

скрипка

Ответ 9

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

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

Ответ 10

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

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

Ответ 11

Просто:

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

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

Единственное условие здесь: элемент font-size не должен быть определен (должен быть равен родительскому font-size).

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

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

Ответ 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/

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

Ответ 13

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

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

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

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

Ответ 14

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

Ответ 15

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

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

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

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

Ответ 16

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

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

    float: left;
}

И сделано.

Ответ 17

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

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

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

http://cdpn.io/dKIjo

Ответ 18

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>

Ответ 19

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

Ответ 20

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

CSS

float: left;

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

Ответ 21

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

ul li {
  display: inline-block;
}

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

Ответ 22

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

Ответ 23

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

Ответ 24

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

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

p {
  text-space-collapse: discard;
}

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

Ответ 25

Существует множество решений, таких как font-size:0, word-spacing, margin-left, letter-spacing и т.д.

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

это нормально, когда мы назначаем значение, которое больше ширины дополнительного пространства (например, -1em).
Тем не менее, это не будет хорошо с word-spacing и margin-left когда мы установим большее значение, например -1em.
Использование 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>

Ответ 26

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

Ответ 27

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

Ответ 28

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

span {
    display: table-cell;
}

Ответ 29

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

Ответ 30

Я опробовал решение 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