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

鉴于此HTML和CSS：

span{
显示：内联块；
宽度：100px；
背景色：淡紫色；
}

福
酒吧

由于这个答案已经相当流行，我正在对它进行重大修改

我们不要忘记被问到的实际问题：

如何删除内联块元素之间的空格？我希望 对于不需要使用HTML源代码的CSS解决方案 篡改仅使用CSS就可以解决此问题吗？

单用CSS就可以解决这个问题，但是没有完全健壮的CSS修复程序

我在最初的回答中的解决方案是将

font-size:0

添加到父元素，然后在子元素上声明一个合理的

font-size

这适用于所有现代浏览器的最新版本。它在IE8中工作。它在Safari 5中不起作用，但在Safari 6中起作用。Safari 5几乎是一款死气沉沉的浏览器（）

大多数与相对字体大小有关的可能问题并不复杂

然而，如果你特别需要一个只使用CSS的补丁，这是一个合理的解决方案，但如果你可以自由地更改HTML（就像我们大多数人一样），这并不是我推荐的解决方案

---

作为一名经验丰富的web开发人员，我实际上就是这样解决这个问题的：

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

福巴

是的，没错。我删除了HTML中内联块元素之间的空白

这很容易。很简单。它无处不在。这是务实的解决办法

有时候你必须仔细考虑空格会来自哪里。用JavaScript追加另一个元素会增加空白吗？不，如果你做得好就不会

让我们开始一段神奇的旅程，通过一些新的HTML，以不同的方式删除空白：

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

项目1
项目2
项目3

• 你可以这样做，就像我通常做的那样：

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

  
  第1项第2项第3项
  
  

• 或者，这是：

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

  
  项目1
  >
  项目2
  项目3
  
  

• 或者，使用注释：

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

  
  第1项第2项第3项
  
  

• 或者，如果您使用的是PHP或类似软件：

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

  
  第1项第2项第3项
  
  

• 或者，甚至完全跳过结束标记（所有浏览器都可以）：

  
  项目1
  项目2
  项目3
  
  

现在，我已经走了，用“一千种不同的方法删除空白，三十点”让你厌烦死了，希望你已经完全忘记了

font-size:0

---

---

或者，您需要实现许多以前可能使用内联块的布局：

对于符合CSS3的浏览器，存在

空白折叠：丢弃

请参阅：
我现在有这个问题，来自
字体大小：0我发现在InternetExplorer7中，问题仍然存在，因为InternetExplorer认为“字体大小为0？！你疯了吗？”-因此，在我的例子中，我重新设置了Eric Meyer的CSS，字体大小为0.01em从InternetExplorer7到Firefox9，我有一个1像素的差异，因此，我认为这是一个解决方案。
今天，我们应该使用


旧答案：

好的，虽然我已经把
字体大小都调高了：0和
未实现的CSS3功能
答案，
在尝试之后，我发现它们都不是真正的解决方案

事实上，甚至没有一种解决办法没有强烈的副作用

然后我决定从
HTML
源代码（
JSP
）中删除
内联块
div之间的空格（
JSP
），
关于这一点：

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

比这更好：

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


要素1
要素2
另外两个选项基于（而不是从规范草案中删除的选项）：


字间距：-100%


理论上，它应该做所需要的事情——缩短空白
按100%的空格字符宽度在“字”之间，即
零。但不幸的是，这似乎在任何地方都不起作用
特性标记为“有风险”（也可以从规范中删除）


字间距：-1ch


它将字间距缩短为数字“0”的宽度。在单空格字体中，它应该完全等于空格字符（以及任何其他字符）的宽度。这适用于Firefox 10+、Chrome 27+，几乎适用于InternetExplorer9+

我最近一直在解决这个问题，我没有设置父容器
字体大小：0
然后将子容器设置回合理的值，而是通过设置父容器
字母间距：-.25em
然后将子容器设置回
字母间距：正常
来获得一致的结果

在另一个帖子中，我看到一位评论员提到，
font-size:0
并不总是理想的，因为人们可以控制浏览器中的最小字体大小，完全否定了将字体大小设置为零的可能性

无论指定的字体大小是100%、15pt还是36px，都可以使用ems

使用flexbox并对较旧的浏览器执行回退（根据上面的建议）：

span {
    display: table-cell;
}

ul{
显示：-网络工具包盒；
D
<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>

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

span {
    display: table-cell;
}

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

* {
    box-sizing: border-box;
}
.row {
    vertical-align: top;
    white-space: nowrap;
}
.column{
    float: left;
    display: inline-block;
    width: 50% // Or whatever in your case
}

<div class="row">
    <div class="column"> Some stuff</div>
    <div class="column">Some other stuff</div>
</div>

span { 
 display:inline-block;
 width:100px;
 background:blue;
 font-size:30px;
 color:white; 
 text-align:center;
 margin-left:-5px;
}
span:first-child{
 margin:0px;
}

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

    float: left;
}

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

float: left;

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