如何删除inline/inline-block元素之间的空间？

这些span元素之间将有一个4像素宽的空间：

span {display: inline-block;width: 100px;background-color: palevioletred;}
<p><span> Foo </span><span> Bar </span></p>

小提琴演示

我知道我可以通过删除超文本标记语言中span元素之间的空白来摆脱该空间：

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

我正在寻找一个不涉及以下内容的CSS解决方案：

  • 更改超文本标记语言。
  • JavaScript。
440936 次浏览
小开
最佳答案

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

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

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

如何删除内联块元素之间的空格？我希望对于不需要超文本标记语言源代码的CSS解决方案这个问题可以单独使用CSS解决吗？

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

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

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

这适用于所有现代浏览器的最新版本。它适用于IE8。它不适用于Safari5，但它确实适用于Safari6。Safari5几乎是一个死浏览器（0.33%，2015年8月）。

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

然而，如果你只修复CSS特别需要，这是一个合理的解决方案，如果你可以自由地改变你的超文本标记语言（就像我们大多数人一样），这不是我推荐的。

作为一个经验丰富的Web开发人员，这就是我为解决这个问题所做的：

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

是的，没错。我删除了超文本标记语言中内联块元素之间的空格。

这很容易。很简单。它在任何地方都有效。这是务实的解决方案。

你有时必须仔细考虑空格的来源。使用JavaScript附加另一个元素会添加空格吗？不，如果你做得好，就不会。

让我们开始一段神奇的旅程，用不同的方法来删除空格，使用一些新的超文本标记语言：

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

小开

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

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

小开

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

小开

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

老答案：

好的，虽然我对font-size: 0;和not implemented CSS3 feature的答案都投了赞成票，#30340；后，发现没有一个是真正的解决方案。

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

然后我决定去掉空格（这个答案是关于这个论点的）在我的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>

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

我找到的解决方案：

使用超文本标记语言注释将一个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>
小开

基于CSS文本模块级别3的另外两个选项（而不是从规范草案中删除的#0）：

  • word-spacing: -100%;

从理论上讲，它应该准确地做需要的事情-缩短空格之间的字由100%的空格字符宽度，即零。但似乎没有任何工作，不幸的是，这功能被标记为“有风险”（它也可以从规范中删除）。

  • word-spacing: -1ch;

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

小提琴

小开

我最近一直在解决这个问题，而不是设置父容器font-size:0然后将子容器设置回一个合理的值，我通过设置父容器letter-spacing:-.25em然后将子容器设置回letter-spacing:normal来获得一致的结果。

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

无论指定的字体大小是100%、15pt还是36px，使用ems似乎都有效。

http://cdpn.io/dKIjo

小开

使用flexbox并为旧浏览器执行回退（来自上面的建议）：

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

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

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

小开

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上，只需在每个inline-block的父级上使用class="items"。

您将不需要返回到css，并为您的新内联块添加另一个css规则。

同时解决两个问题。

还要注意>（大于符号），这意味着*/所有子节点都应该是inline-block。

http://jsfiddle.net/fD5u3/

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

小开

display:inline-block的所有空间消除技术都是令人讨厌的黑客攻击…

使用Flexbox

它很棒，解决了所有这些内联块布局问题，并且截至2017年有98%的浏览器支持（如果你不关心旧的IE，更多）。

小开

2021解决方案

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

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

小开

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

小开

通常我们在不同的行中使用这样的元素，但在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>

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

小开

所以有很多复杂的答案。我能想到的最简单的方法就是给其中一个元素一个负边距（margin-left或margin-right取决于元素的位置）。

小开 

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>

小开

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

小开

我找到了一个纯CSS解决方案，在所有浏览器中都能很好地工作：

span {display: table-cell;}
小开

简单：

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

不需要触摸父元素。

这里唯一的条件是：不能定义项目的font-size（必须等于父项目的font-size）。

0.25em是默认的word-spacing

W3学校-字-行间距属性

小开

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

超文本标记语言：

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

这里是Plunker。

小开

去掉内联块元素中的空格，方法有很多：

  1. 字体大小为零

    nav {font-size: 0;}nav a {font-size: 16px;}

  2. Negative margin

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

  3. Skip the closing tag

    <ul><li> one<li> two<li> three</ul>

  4. Use comments:

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

小开

CSS文本模块4级规范定义了#0属性，它允许控制如何处理元素内部和周围的空白。

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

p {text-space-collapse: discard;}

不幸的是，还没有浏览器实现此属性（截至2016年9月），如HBP的答案的评论中所述。

小开

我发现的另一种方法是将除行的第一个元素之外的其他值应用为负值。

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

在CSS中有一个简单的解决方案。例如：

超文本标记语言

<p class="parent"><span class="children"> Foo </span><span class="children"> Bar </span></p>

css

.parent {letter-spacing: -.31em;*letter-spacing: normal;*word-spacing: -.43em;}.children {display: inline-block;*display: inline;zoom: 1;letter-spacing: normal;word-spacing: normal;}

在我看来，当你在像em这样的项目中使用它时，编写font-size: 0是不安全的，所以我更喜欢purecss的解决方案。

您可以在以下链接中查看此框架purecss：）

.row {letter-spacing: -.31em;*letter-spacing: normal;*word-spacing: -.43em;
/* For better view */background: #f9f9f9;padding: 1em .5em;}
.col {display: inline-block;*display: inline;zoom: 1;letter-spacing: normal;word-spacing: normal;
/* For better view */padding: 16px;background: #dbdbdb;border: 3px #bdbdbd solid;box-sizing: border-box;width: 25%;}
<div class="row">
<div class="col">1</div><div class="col">2</div><div class="col">3</div><div class="col">4</div>
</div>

小开

我在React中尝试了类似问题的font-size: 0解决方案，并在我目前正在进行的Free 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'));

然后，Sass：

html, bodyheight: 100%
bodyheight: 100%margin: 0padding: 0
#mainDivwidth: 80%height: 60%margin: autopadding-top: 5pxpadding-bottom: 5pxbackground-color: DeepSkyBluetext-align: centerborder: 2px solid #381F0Bborder-radius: 4pxmargin-top: 20px
#buttonsDivwidth: 80%height: 60%margin: automargin-bottom: 0pxpadding-top: 5pxpadding-bottom: 0pxbackground-color: greytext-align: centerborder: 2px solid #381F0Bborder-radius: 4pxmargin-top: 20px
#applicationGridwidth: 65%height: 50%padding-top: 0pxmargin: autofont-size: 0margin-top: 0pxpadding-bottom: 5pxbackground-color: whitetext-align: centerborder: 2px solid #381F0Bborder-radius: 4pxmargin-top: 20px
#actionBoxwidth: 20pxheight: 20PXpadding-top: 0pxdisplay: inline-blockmargin-top: 0pxpadding-bottom: 0pxbackground-color: lightgreytext-align: centerborder: 2px solid greymargin-bottom: 0px
小开

我不太确定你是想做两个没有间隙的蓝色跨度，还是想处理其他空白，但是如果你想删除间隙：

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

完成了。

小开

虽然从技术上讲不是问题的答案："如何删除inline-block元素之间的空间？"

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

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

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

小开

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

小开

每一个问题，试图消除inline-block之间的空间对我来说似乎都是<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>

小开

使用PHP括号：

ul li {display: inline-block;}
    <ul><li><div>first</div></li><??><li><div>first</div></li><??><li><div>first</div></li></ul>

小开

试试这个片段：

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

工作演示：http://jsfiddle.net/dGHFV/2784/

小开

只是为了好玩：一个简单的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. 但是，当我们设置像-1em这样的更大值时，word-spacing和margin-left就不好了。
  3. 当我们尝试使用em作为font-size单元时，使用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-行间距，发现了这个：

长度

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

似乎就是这个原因。

小开

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

css

float: left;

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

小开

在父级p css上添加letter-spacing:-4px;，并将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>

小开

使用其中一个技巧

  1. 去掉空格
  2. 负边距
  3. 跳过结束标记（HTML5反正不在乎）
  4. 将字体大小设置为零（具有零font-size的空间是…零宽度）
  5. 使用flexbox

请参阅下面的代码：

body {font-family: sans-serif;font-size: 16px;}
ul {list-style: none}
li {background: #000;display: inline-block;padding: 4px;color: #fff;}
ul.white-space-fix li {margin-right: -4px;}
ul.zero-size {font-size: 0px;}
ul.zero-size li {font-size: 16px;}
ul.flexbox {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;}
original...<ul><li>one</li><li>two</li><li>three</li></ul>
Funky code formatting...<ul><li>one</li><li>two</li><li>three</li></ul>
Adding html comments...<ul><li>one</li><!----><li>two</li><!----><li>three</li></ul>
CSS margin-right: -4px;<ul class="white-space-fix"><li>one</li><li>two</li><li>three</li></ul>
Omitting the &lt;/li&gt;<ul><li>one<li>two<li>three</ul>
fixed with font-size: 0<br><br><ul class="zero-size"><li>one</li><li>two</li><li>three</li></ul>
<br> flexbox<br><ul class="flexbox"><li>one</li><li>two</li><li>three</li></ul>

小开 

span {display:inline-block;width:50px;background:blue;font-size:30px;color:white;text-align:center;}
<p><span>Foo</span><span>Bar</span></p>

小开

如果您使用Twig模板引擎，您可以使用空间：

<p>{% spaceless %}<span>Foo</span><span>Bar</span>{% endspaceless %}</p>

请注意，虽然这并没有解决所问的确切问题，但如果有人拥有Twig，这可能会很有用，以避免使用一些较小的解决方案。

小开

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

这些CSS属性是grid

除了IE之外，CSS Grid受到高度支持（可以使用），IE只需要-ms-前缀即可工作。

CSS Grid也非常灵活，它从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>

小开

负边距

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

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

为什么不这样……有点老土，取决于你的css单元代码，但是：

.my-span {position: relative;left: -1em;width: 1em;}
<span>...</span><span class="my-span"></span>

提交答案