如何删除内联块元素之间的空间？

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

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

html css

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

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

对于符合 CSS3 的浏览器，可以使用white-space-collapsing:discard

参见： http : //www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing

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

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

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

<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 的话，更多）。

@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;
}

添加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 + 和 IE 9 + 中运行。

小提琴

不幸的是，现在是 2019 年， white-space-collapse仍然没有实现。

同时，给父元素font-size: 0;并在子font-size上设置font-size 。这应该可以解决问题

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

答案

更新资料