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

Question

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

 span { display: inline-block; width: 100px; background-color: palevioletred; }

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

小提琴演示

我知道我可以通过删除 HTML 中span元素之间的空白来摆脱该空间：

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

我正在寻找不涉及的 CSS 解决方案：

• 更改 HTML。
• JavaScript。

Answer 1

或者，您现在应该使用 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%，2015 年 8 月）。

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

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

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

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

Answer 2

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

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

Answer 3

今天，我们应该只使用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>

Answer 4

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

Answer 5

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

使用弹性盒

太棒了，解决了所有这些 inline-block 布局 bs，并且截至 2017 年有98% 的浏览器支持（如果你不关心旧的 IE 则更多）。

• 我们准备好使用 Flexbox 了吗？
• 使用 CSS 灵活框 - Web 开发者指南 | MDN
• Flexbox 完整指南 | CSS 技巧
• Flexy Boxes — CSS flexbox 游乐场和代码生成工具

Answer 6

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

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

Answer 7

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

实际上有一种非常简单的方法可以从 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 webfont 生成器转换的字体的下载。 花了我5分钟。 包含 css @font-face声明： zipped zero-width space font 。 它位于 Google 云端硬盘中，因此您需要单击“文件”>“下载”将其保存到您的计算机上。 如果将声明复制到主 css 文件，您可能还需要更改字体路径。

Answer 8

2021解决方案

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

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

Answer 9

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

• word-spacing: -100%;

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

• word-spacing: -1ch;

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

小提琴

Answer 10

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

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

Answer 11

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

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

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

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

Answer 12

简单的：

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

无需触摸父元素。

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

0.25em是默认word-spacing

W3Schools - 字间距属性

Answer 13

字体大小：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 规则。

一次解决两个问题。

另请注意> （大于符号）这意味着 */all 子项应该是内联块。

http://jsfiddle.net/fD5u3/

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

Answer 14

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

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

Answer 15

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

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

    float: left;
}

并做了。

Answer 16

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

Answer 17

 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>

Answer 18

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

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

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

http://cdpn.io/dKIjo

Answer 19

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

Answer 20

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

css

float: left;

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

Answer 21

使用 PHP 括号：

 ul li { display: inline-block; }

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

Answer 22

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

Answer 23

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

span {
    display: table-cell;
}

Answer 24

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

Answer 25

CSS Text Module Level 4 规范定义了一个text-space-collapse属性，它允许控制如何处理元素内部和周围的空白。

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

p {
  text-space-collapse: discard;
}

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

Answer 26

有很多解决方案，例如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-spacing并发现了这个：

长度

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

似乎这就是原因。

Answer 27

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

Answer 28

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

这些 CSS 属性是grid

CSS Grid 得到高度支持（ CanIUse ），除了 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>

Answer 29

负边距

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

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

Answer 30

从内联块元素中删除空格，有很多方法：

1. 字体大小为零

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

2. 负边距

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

3. 跳过结束标签

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

4. 使用注释：

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

Answer 31

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

Answer 32

我为我目前正在处理的一个 Free Code Camp 项目尝试了font-size: 0解决方案来解决 React 和Sass中的类似问题。

它有效！

首先，脚本：

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')
);

然后，萨斯：

html, body
    height: 100%

body
    height: 100%
    margin: 0
    padding: 0

#mainDiv
    width: 80%
    height: 60%
    margin: auto
    padding-top: 5px
    padding-bottom: 5px
    background-color: DeepSkyBlue
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#buttonsDiv
    width: 80%
    height: 60%
    margin: auto
    margin-bottom: 0px
    padding-top: 5px
    padding-bottom: 0px
    background-color: grey
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#applicationGrid
    width: 65%
    height: 50%
    padding-top: 0px
    margin: auto
    font-size: 0
    margin-top: 0px
    padding-bottom: 5px
    background-color: white
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#actionBox
    width: 20px
    height: 20PX
    padding-top: 0px
    display: inline-block
    margin-top: 0px
    padding-bottom: 0px
    background-color: lightgrey
    text-align: center
    border: 2px solid grey
    margin-bottom: 0px

Answer 33

每一个试图删除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>

Answer 34

只是为了好玩：一个简单的 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>

Answer 35

使用这些技巧之一

1. 删除空格
2. 负边距
3. 跳过结束标签（HTML5 无论如何都不关心）
4. 将字体大小设置为零（字体大小为零的空间是......零宽度）
5. 使用弹性盒

请看下面的代码：

 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>

Answer 36

如果您使用的是 Twig 模板引擎，则可以使用spaceless ：

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

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

Answer 37

为什么不这样......有点hacky，并且取决于您的css单元代码，但是：

.my-span {
    position: relative;
    left: -1em;
    width: 1em;
}

<span>...</span><span class="my-span"></span>

Answer 38

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

HTML

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

Answer 39

试试这个片段：

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

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

Answer 40

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

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

Answer 41

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