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

Question

С учетом этого 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?

Answer 1

В скобках PHP:

ul li {
  display: inline-block;
}

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

Answer 2

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

Answer 3

Просто для удовольствия: простое решение 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>

Answer 4

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

Answer 5

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

length

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

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

Answer 6

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

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

p {
  text-space-collapse: discard;
}

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

Answer 7

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

Вот этот Плункер .

Answer 8

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

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

Сначала сценарий:

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

Answer 9

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

1. Отрицательное поле

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

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

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

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

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

Answer 10

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

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

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