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

для 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, etc...) ?

например:

<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>

это не читабельно, трудно для того чтобы mantain и понять, etc...

решение я нашел:

использовать 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>

надеюсь, это поможет...

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

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

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

на самом деле есть очень простой способ удалить пробелы из встроенного блока, который является простым и семантическим. Он называется пользовательским шрифтом с пробелами нулевой ширины, который позволяет свернуть пробелы (добавленные браузером для встроенных элементов, когда они находятся на отдельных строках) на уровне шрифта, используя очень крошечный шрифт. Как только вы объявите шрифт, вы просто измените его the 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 webfont generator. У меня ушло 5 минут. Код CSS @font-face декларации входит: zipped zero-width space font. Он находится на Google диске, поэтому вам нужно нажать "Файл" > "загрузить", чтобы сохранить его на свой компьютер. Вероятно, вам также потребуется изменить пути шрифта если вы скопируете декларацию в свой основной файл css.

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

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

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

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

добавить 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;
}

размер шрифта: 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-свойство интервалов между словами

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

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

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

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

у меня была эта проблема прямо сейчас и от font-size:0; Я обнаружил, что в Internet Explorer 7 проблема остается, потому что Internet Explorer думает "размер шрифта 0?!?! WTF вы сумасшедший человек?"- Итак, в моем случае у меня есть сброс CSS Эрика Мейера и с font-size:0.01em; У меня есть разница в 1 пиксель от Internet Explorer 7 до Firefox 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>

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

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

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

    float: left;
}

и сделал.

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

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

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

http://cdpn.io/dKIjo

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>

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

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

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

в CSS

float: left;

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

на спецификация уровня 4 текстового модуля CSS определяет 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.

Я пробовал font-size: 0 решение аналогичной проблемы в React и Сасс для бесплатного проекта 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')
);

затем Сасс:

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

просто для удовольствия: простое решение 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,word-spacing,margin-left,letter-spacing и так далее.

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

1. кажется ОК, когда мы назначаем значение, которое больше ширины дополнительного пространства (например,-1em).
2. однако, это не будет хорошо с word-spacing и margin-left когда мы устанавливаем большее значение, как -1em.
3. используя font-size не удобно, когда мы пытаемся с помощью em as 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:-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>

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

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