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

鉴于此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/

我了解为什么会发生这种情况，并且我也知道可以通过删除HTML源代码中SPAN元素之间的空白来摆脱该空间，如下所示：

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

但是，我希望找到一种不需要篡改HTML源代码的CSS解决方案。

我知道如何使用JavaScript解决此问题-通过从容器元素（该段落）中删除文本节点，如下所示：

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

演示： http ：//jsfiddle.net/dGHFV/1/

但是，仅使用CSS即可解决此问题吗？

由于此答案已变得非常流行，因此我将对其进行大量重写。

我们不要忘记提出的实际问题：

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

这是有可能解决这个问题单独CSS，但目前还没有完全强大的CSS修复。

我最初回答中的解决方案是添加font-size: 0到父元素，然后在子元素上声明一个明智font-size的选择。

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

在所有现代浏览器的最新版本中均可使用。它可以在IE8中使用。它在Safari 5 中不起作用，但在Safari 6中却起作用。Safari 5几乎是无效的浏览器（2015年8月为0.33％）。

相对字体大小的大多数可能问题并不复杂解决。

但是，虽然如果您特别需要仅CSS修复，这是一个合理的解决方案，但是如果您可以自由更改HTML（与我们大多数人一样），那么我不建议您这样做。

作为一名经验丰富的Web开发人员，我实际上是为解决此问题而做的：

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

恩，那就对了。我删除了inline-block元素之间HTML中的空格。

这简单。这很简单。它无处不在。这是务实的解决方案。

有时您确实必须仔细考虑空格的来源。将用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来实现以前可能用于inline-block的许多布局：https : //css-tricks.com/snippets/css/a-guide-to-flexbox/

对于符合CSS3的浏览器，有 white-space-collapsing:discard

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

编辑：

今天，我们应该只使用Flexbox。

旧答案：

好的，尽管我同时对font-size: 0;和not implemented CSS3 feature答案都进行了投票，但在尝试后我发现它们都不是真正的解决方案。

实际上，甚至没有一种没有严重副作用的解决方法。

然后，我决定inline-block从HTML源（JSP）中删除 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 class="inlineBlock">
    I'm an inline-block div
</div>

很难看，但是可以用。

但是，等一下...如果我发生什么在我的div的Taglibs loops（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的结尾连接到下一个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>

所有的空间消除技术display:inline-block都是令人讨厌的骇客...

使用Flexbox

太棒了，解决了所有这些内联块布局bs，并且到2017年为止，它具有98％的浏览器支持（如果您不关心旧IE的话，更多）。

• 我们准备好使用Flexbox了吗？
• 使用CSS柔性盒-Web开发人员指南| MDN
• Flexbox完整指南| CSS技巧
• Flexy Boxes-CSS flexbox操场和代码生成工具

添加display: flex;到父元素。这是带有前缀的解决方案：

简化版👇

p {
  display: flex;
}

span {
  width: 100px;
  background: tomato;
  font-size: 30px;
  color: white;
  text-align: center;
}

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

用前缀修复

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>

这是我在相关内容上给出的相同答案：显示：内联块-那是什么空间？

实际上，有一种非常简单的方法可以从内联块中删除空白，这既简单又语义。它被称为具有零宽度空格的自定义字体，它允许您使用非常小的字体在字体级别折叠空白（当行内元素位于单独的行时由浏览器添加的空白）。声明字体后，只需更改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生成器转换的字体的下载。花了我5分钟。@font-face包含css 声明：压缩零宽度空格字体。它位于Google云端硬盘中，因此您需要点击文件>下载以将其保存到计算机中。如果将声明复制到主CSS文件中，则可能还需要更改字体路径。

基于CSS Text Module Level 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。这应该可以解决问题

使用flexbox并针对旧版浏览器进行后备（来自以上建议）：

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

简单：

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

无需触摸父元素。

唯一的条件是：不得定义项目的字体大小（必须等于父项的字体大小）。

0.25em 是默认值 word-spacing

W3Schools-字距属性

font-size：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/

注意：我进行了修改，以适应当包装器有子包装器时继承字母间距。

但是，从技术上讲，并不是对以下问题的答案：“如何删除内联块元素之间的空间？”

您可以尝试flexbox解决方案并应用下面的代码，空格将被删除。

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

您可以通过以下链接了解更多信息：https : //css-tricks.com/snippets/css/a-guide-to-flexbox/

我不太确定是要形成两个没有间距的蓝色范围还是要处理其他空白，但是如果您要消除该间距：

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

    float: left;
}

并做了。

通常，我们在不同的行中使用类似的元素，但是如果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>

根据整个应用程序的不同，上述方法可能无法在某处工作，但是最后一种方法是针对这种情况的万无一失的解决方案，可以在任何地方使用。

我现在遇到了这个问题，从中font-size:0;我发现在Internet Explorer 7中问题仍然存在，因为Internet Explorer认为“字体大小0？！？！WTF是您疯子吗？”。-因此，就我而言，我重置了Eric Meyer的CSS，font-size:0.01em;从Internet Explorer 7到Firefox 9，我的像素相差1个像素，因此，我认为这可以解决。

我最近一直在解决这个问题，而不是font-size:0先设置父容器，letter-spacing:-.25em然后再将孩子设置回合理的值，而不是先设置父容器，然后再将孩子设置回合理的值letter-spacing:normal。

在另一个话题中，我看到一个评论者提到的font-size:0内容并不总是理想的，因为人们可以在其浏览器中控制最小字体大小，从而完全消除了将字体大小设置为零的可能性。

无论指定的字体大小是100％，15pt还是36px，使用ems似乎都可以工作。

http://cdpn.io/dKIjo

我认为有一个非常简单/旧的方法，所有浏览器甚至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>

这个问题的最简单答案是添加。

的CSS

float: left;

codepen链接：http：//jsfiddle.net/dGHFV/3560/

使用PHP括号：

ul li {
  display: inline-block;
}

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

我将对user5609829的答案进行一些扩展，因为我相信这里的其他解决方案太复杂/工作量太大。将a margin-right: -4px应用于内联块元素将消除间距，并且所有浏览器都支持。在这里查看更新的小提琴。对于那些关注使用切缘阴性，尝试给这个一读。

的CSS文本模块等级4规范定义了一个text-space-collapse属性，该属性允许控制如何白色空间内部和周围的元件进行处理。

因此，对于您的示例，您只需编写以下代码：

p {
  text-space-collapse: discard;
}

不幸的是，如HBP答案的注释中所述，尚无浏览器实现此属性（截至2016年9月）。

我找到了一个纯CSS解决方案，该解决方案在所有浏览器中都非常适合我：

span {
    display: table-cell;
}

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

这是柱塞。

有很多类似的解决方案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并发现了这一点：

长度

除了字符之间的默认间隔外，还指定额外的字符间间隔。值可能为负，但可能存在特定于实现的限制。用户代理不得进一步增加或减少字符间空间以证明文本合理。

看来这就是原因。

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

我以为我会在这个问题上添加一些新内容，尽管当前提供的许多答案绰绰有余，而且有一些新的CSS属性可以实现非常干净的输出，并在所有浏览器中都提供全面支持，而几乎没有没有“骇客”。这的确可以避免，inline-block但可以为您提供与所要求的问题相同的结果。

这些CSS属性是 grid

除了IE以外，CSS Grid受到高度支持（CanIUse），而IE仅需要一个-ms-前缀即可使其工作。

CSS电网也非常灵活，并采取所有好的部分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>

我发现的另一种方法是，将行的第一个元素以外的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>