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

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

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

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

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

仅使用 CSS 可以解决这个问题，但没有完全健壮的 CSS 修复。

我在最初的答案中给出的解决方案是添加到父元素中，然后在子元素上声明一个合理的元素。font-size: 0font-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

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

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

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

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

旧答案：

好的，虽然我已经对答案和答案都投了赞成票， 尝试后，我发现它们都不是真正的解决方案。font-size: 0;not implemented CSS3 feature

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

然后我决定从我的源中删除 div 之间的空格（这个答案是关于这个参数的）， 转过来：inline-blockHTMLJSP

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

例如：

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

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

• word-spacing: -100%;

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

• word-spacing: -1ch;

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

小提琴

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

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

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

http://cdpn.io/dKIjo

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

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

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

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

字体大小：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 children 应该是内联块。>

http://jsfiddle.net/fD5u3/

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

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

使用 Flexbox

这太棒了，解决了所有这些内联块布局 bs，截至 2017 年，它拥有 98% 的浏览器支持（如果您不关心旧的 IE，则更多）。

• 我们准备好使用 Flexbox 了吗？
• 使用 CSS 弹性框 - Web 开发人员指南 |MDN网络
• Flexbox 完整指南 |CSS-技巧
• Flexy Boxes — CSS flexbox playground 和代码生成工具

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:0font-size

p {
  font-size: 0;
}
p span {
  display: inline-block;
  background: red;
  font-size: 14px;
}

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

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

所以很多复杂的答案。我能想到的最简单的方法是只给其中一个元素一个负边距（要么或取决于元素的位置）。margin-leftmargin-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 的答案进行一些扩展，因为我相信这里的其他解决方案太复杂/工作量太大。将 a 应用于内联块元素将删除间距，并且所有浏览器都支持。在此处查看更新的小提琴。对于那些担心使用负边距的人，请尝试阅读此内容。margin-right: -4px

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

span {
    display: table-cell;
}

简单：

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

无需触摸父元素。

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

0.25em是默认值word-spacing

W3Schools - word-spacing 属性

添加到容器元素：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。

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

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>

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

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

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中有一个简单的解决方案。例如：

[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 这样的项目中使用它时，写作是不安全的，所以我更喜欢 purecss 的解决方案。font-size: 0

你可以在这个链接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 和 Sass 中尝试了类似问题的解决方案，用于我目前正在处理的 Free Code Camp 项目。font-size: 0

它有效！

一、脚本：

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

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

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

    float: left;
}

大功告成。

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

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

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

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

我认为有一种非常简单/古老的方法，所有浏览器甚至 IE 6/7 都支持这种方法。我们可以简单地在父元素中设置为一个大的负值，然后将其设置回子元素：letter-spacingnormal

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>

每个试图消除 s 之间的空格的问题对我来说似乎都是一个......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:0word-spacingmargin-leftletter-spacing

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

1. 当我们分配一个大于额外空间宽度的值时，这似乎是可以的（例如）。-1em
2. 但是，当我们设置更大的值（例如 .word-spacingmargin-left-1em
3. 当我们尝试作为单位使用时，使用并不方便。font-sizeemfont-size

所以，似乎是最好的选择。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 并发现：

长度

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

看来这就是原因。

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

CSS的

float: left;

CodePen 链接： http://jsfiddle.net/dGHFV/3560/

添加父 css 并添加到您的 css。letter-spacing:-4px;pletter-spacing:0px;span

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. 将字体大小设置为零（字体大小为零的空间是...零宽度）
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 属性是网格

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

CSS Grid 也非常灵活，它从 、 和 元素中获取所有好的部分，并将它们带到一个地方。tableflexinline-block

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

为了简短一点，这里有一个相关的工作示例：

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>