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

或者，您 should now use flexbox 可以实现许多您以前可能使用过 inline-block 的布局：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

由于这个答案已经变得相当流行，我正在重写它。

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

如何删除行内块元素之间的空间？我希望有一个不需要篡改 HTML 源代码的 CSS 解决方案。这个问题可以单独用 CSS 解决吗？

单独使用 CSS 可以解决这个问题，但没有完全强大的 CSS 修复。

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

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

这适用于所有现代浏览器的最新版本。它适用于 IE8。它在 Safari 5 中不起作用，但在 Safari 6 中确实起作用。Safari 5 几乎是一个死机浏览器 (0.33%, August 2015)。

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

但是，如果您特别需要仅修复 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>

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

• Item 1
• Item 2
• Item 3

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

或者，这个：

• 第 1 项
• 第 2 项
• 第 3 项

或者，使用注释：

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

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

• Item 1
• 第 2 项
• 第三条

或者，您甚至可以完全跳过某些结束标签（所有浏览器都可以这样做）：

• Item 1
• Item 2
• Item 3

既然我已经用“一千种不同的方法来删除空格，到 30 点”让你厌烦至死，希望你已经忘记了所有关于 font-size: 0 的事情。

---

它适用于 FF3.6、IE9RC、O11、Ch9。但是，在 Safari 5 中仍然存在 1 像素宽的差距:(
@thirtydot 你能看看this answer的评论吗？可能这个 font-size:0 技巧毕竟不是一个好主意......
我知道张贴者正在寻找一个 CSS 解决方案，但这个解决方案 - 这是迄今为止投票最多的（30 票对 5 票，当我写这篇文章时） - 具有很强的副作用，甚至不能跨浏览器工作。在这一点上，简单地删除 HTML 中有问题的空格更为实用。
此解决方案仅适用于您的容器尺寸不使用 EM
这会破坏具有相对字体大小的子元素。

对于符合 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 的答案都投了赞成票，但在尝试后我发现 它们都不是真正的解决方案。

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

然后我决定从我的 HTML 源 (JSP) 中删除 inline-block 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>

那很丑陋，但是可以工作。

但是，等一下...如果我在 Taglibs loops（Struts2、JSTL 等...）中生成我的 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>

这不可读，难以维护和理解等。

我找到的解决方案：

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

---

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

简化版👇

{ 显示：弹性； } 跨度 { 宽度：100px;背景：番茄；字体大小：30px；白颜色;文本对齐：居中； }

Foo Bar

修复前缀👇

p {显示：-webkit-box；显示：-webkit-flex；显示：-ms-flexbox；显示：弯曲； } 跨度 { 浮动：左；显示：内联块；宽度：100px；背景：蓝色；字体大小：30px；白颜色;文本对齐：居中； }

Foo Bar

---

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

使用Flexbox

太棒了，解决了所有这些内联块布局 bs，并且截至 2017 年有 98% browser support（如果您不关心旧 IE，则更多）。

我们准备好使用 Flexbox 了吗？

使用 CSS 灵活框 - Web 开发者指南 | MDN

Flexbox 完整指南 | CSS 技巧

Flexy Boxes — CSS flexbox 游乐场和代码生成工具

---

在元素之间添加注释以不包含空格。对我来说，这比将字体大小重置为零然后重新设置要容易。

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

---

这是我在相关问题上给出的相同答案：Display: Inline block - What is that space?

实际上有一种非常简单的方法可以从 inline-block 中删除空格，既简单又符合语义。它被称为具有零宽度空格的自定义字体，它允许您使用非常小的字体在字体级别折叠空格（当内联元素位于单独的行时由浏览器添加）。声明字体后，您只需更改容器上的 font-family 并再次更改子级上的 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分钟。包含 css @font-face 声明：zipped zero-width space font。它在 Google Drive 中，所以你需要点击 File >下载以将其保存到您的计算机。如果将声明复制到主 css 文件，您可能还需要更改字体路径。

---

2021解决方案

不幸的是，white-space-collapse 仍未实现。

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

---

基于 CSS Text Module Level 3 的另外两个选项（而不是从规范草案中删除的 white-space-collapsing:discard）：

字间距：-100%；

理论上，它应该完全满足需要——将“单词”之间的空格缩短 100% 的空格字符宽度，即为零。但不幸的是，它似乎在任何地方都不起作用，并且这个特性被标记为“有风险”（它也可以从规范中删除）。

字间距：-1ch；

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

Fiddle

---

使用 flexbox 并为旧浏览器做一个后备（根据上面的建议）：

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

---

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

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

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

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

---

简单的：

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

无需触摸父元素。

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

0.25em 是默认的 word-spacing

W3Schools - word-spacing property

---

字体大小：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/

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

---

通常我们在不同的行中使用这样的元素，但是如果 display:inline-block 在同一行中使用标签会删除空格，但在不同的行中不会。

不同行中带有标签的示例：

p span { 显示：内联块；背景：红色； }

Foo Bar

同一行中带有标签的示例

span { 显示：内联块；背景：红色； }

Foo 条形

另一种有效的方法是 CSS 作业，它将 font-size:0 用于父元素，并根据需要将 font-size 提供给子元素。

p {字体大小：0； } p span { 显示：内联块；背景：红色；字体大小：14px； }

Foo Bar

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

---

我不太确定您是要制作两个没有间隙的蓝色跨度还是要处理其他空白，但是如果您想消除间隙：

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

    float: left;
}

并做了。

---

我现在遇到了这个问题，从 font-size:0; 我发现在 Internet Explorer 7 中问题仍然存在，因为 Internet Explorer 认为“字体大小为 0？！？！WTF 你是疯子吗？” - 所以，在我的情况下，我重置了 Eric Meyer 的 CSS，并且使用 font-size:0.01em; 我从 Internet Explorer 7 到 Firefox 9 有 1 个像素的差异，所以，我认为这可能是一个解决方案。

---

p { 显示：弹性； } 跨度 { 浮动：左；显示：内联块；宽度：100px；背景：红色；字体大小：30px；白颜色; }

你好 世界

---

我最近一直在解决这个问题，而不是设置父容器 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：

正文 { 字体大小：24px } 跨度 { 边框：1px 实心 #b0b0c0; } /* 显示边框以查看间距 */ .no-spacing { letter-spacing: -1em; } /* 可能是一个很大的负值 */ .no-spacing > * { letter-spacing: normal; } /* => 恢复正常间距 */

错误（默认间距）：

---

正确（无间距）：

---

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

css

float: left;

代码笔链接：http://jsfiddle.net/dGHFV/3560/

---

使用 PHP 括号：

ul li { display: inline-block; }

• first
• 第一
• first

---

我将稍微扩展 user5609829 的答案，因为我认为这里的其他解决方案太复杂/工作量太大。将 margin-right: -4px 应用于内联块元素将删除间距，并且所有浏览器都支持。请参阅更新的小提琴 here。对于那些关心使用负边距的人，请尝试阅读 this。

---

CSS Text Module Level 4 specification defines a text-space-collapse 属性，允许控制如何处理元素内部和周围的空白。

所以，关于你的例子，你只需要这样写：

p {
  text-space-collapse: discard;
}

遗憾的是，没有浏览器实现此属性（截至 2016 年 9 月），如对 answer of HBP 的评论中所述。

---

我找到了一个在所有浏览器中都非常适合我的纯 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>

这是Plunker。

---

有很多解决方案，例如 font-size:0、word-spacing、margin-left、letter-spacing 等。

通常我更喜欢使用 letter-spacing 因为

当我们分配一个大于额外空间宽度的值（例如-1em）时似乎没问题。但是，当我们设置较大的值（如 -1em）时，字间距和左边距就不行了。当我们尝试使用 em 作为字体大小单位时，使用 font-size 并不方便。

因此，letter-spacing 似乎是最佳选择。

但是，我必须警告你

当您使用 letter-spacing 时，最好使用 -0.3em 或 -0.31em 而不是其他人。

{边距：0；填充：0； } a { 文字装饰：无；颜色：继承；光标：自动； } .nav { 宽度：260px;高度：100px；背景颜色：粉红色；白颜色;字体大小：20px；字母间距：-1em； } .nav__text { 宽度：90px;高度：40px； box-sizing：边框框；边框：1px纯黑色；行高：40px；背景颜色：黄绿色；文本对齐：居中；显示：内联块；字母间距：正常； }

在父 p css 上添加 letter-spacing:-4px; 并将 letter-spacing:0px; 添加到您的 span css。

跨度{显示：内联块；宽度：100 像素；背景颜色：浅红色；垂直对齐：底部；字母间距：0px； } p { 字母间距：-4px; }

Foo Bar

---

我想我会为这个问题添加一些新的东西，因为尽管目前提供的许多答案都绰绰有余了。相关，有一些新的 CSS 属性可以实现非常干净的输出，完全支持所有浏览器，几乎没有“黑客”。这确实远离了 inline-block，但它为您提供了与所要求的问题相同的结果。

这些 CSS 属性是 grid

高度支持 CSS Grid (CanIUse)，除了 IE，它只需要一个 -ms- 前缀就可以工作。

CSS Grid 也非常灵活，可以将 table、flex 和 inline-block 元素的所有优点集中到一个位置。

创建 grid 时，您可以指定行和列之间的间距。默认间隙已设置为 0px，但您可以将此值更改为您喜欢的任何值。

简而言之，这是一个相关的工作示例：

身体{背景：浅蓝色；字体系列：无衬线； } .container { 显示：网格；网格模板列：100px 100px；网格列间隙：0； /* 不需要但例如有用 */ grid-row-gap: 0; /* 不需要但很有用，例如 */ } .box { background: red; } .box:nth-child(even) { 背景：绿色； }

---

负边距

您可以使用负 4px 的边距将元素滑回原位（可能需要根据父级的字体大小进行调整）。显然这在较旧的 IE（6 和 7）中是有问题的，但如果您不关心这些浏览器，至少您可以保持代码格式干净。

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

---

我发现的另一种方法是将 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;
}

---