Question

鉴于此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来解决吗？

Answer 1

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

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

如何删除内联块元素之间的空格？我希望对于不需要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（我们大多数人都是），那么这不是我的建议。 / p>

作为一名经验丰富的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>

或者，you can甚至完全跳过certain结束标记（所有浏览器都可以这样做）：
```
<ul>
    <li>Item 1
    <li>Item 2
    <li>Item 3
</ul>
```

现在我已经走了，用“千种不同的方式去除空白，通过thirtydot”让你感到无聊，希望你已经忘记了font-size: 0的一切。

或者，您can now use flexbox可以实现以前使用内联块的许多布局：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

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

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

Answer 3

好的，虽然我对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>

这很难看，但有效。

但是，等一下......如果我在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

在元素之间添加注释，以便没有空格。对我来说，比将字体大小重置为零然后重新设置更容易。

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

Answer 5

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

使用Flexbox

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

Answer 6

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

实际上有一种非常简单的方法可以从内联块中删除空白，这既简单又语义。它被称为具有零宽度空间的自定义字体，允许您使用非常小的字体折叠字体级别的空格（由浏览器添加内嵌元素，当它们位于不同的行上时）。声明字体后，只需更改容器上的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云端硬盘中，因此您需要点击文件＆gt;下载以将其保存到您的计算机。如果将声明复制到主css文件，则可能还需要更改字体路径。

Answer 7

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

＆＃13;

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

＆＃13;

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

＆＃13;

更新

简化版

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 8

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

word-spacing: -100%;

理论上，它应该完全按照需要做 - 缩短空白 “字”之间的空格字符宽度的100％，即零。但遗憾的是，似乎并没有在任何地方工作功能标记为“有风险”（也可以从规范中删除）。

word-spacing: -1ch;

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

Fiddle

Answer 9

不幸的是，它是2019年，white-space-collapse仍未实施。

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

Answer 10

使用flexbox并对旧浏览器进行回退（来自上述建议）：

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

Answer 11

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

注意：我已修改为容纳在包装器具有子包装器时继承字母间距。

Answer 12

虽然技术上不是这个问题的答案：＆＃34;如何删除内联块元素之间的空格？＆＃34;

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

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

您可以在此链接上了解有关详情：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 13

简单：

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

无需触摸父元素。

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

0.25em是默认的word-spacing

W3Schools - word-spacing property

Answer 14

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

标签位于不同行的示例：

＆＃13;

p span {
  display: inline-block;
  background: red;
}

＆＃13;

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

＆＃13;

标记位于同一行的示例

＆＃13;

p span {
  display: inline-block;
  background: red;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

上述方法可能无法在某处运行，具体取决于整个应用程序，但最后一种方法对于这种情况来说是一个万无一失的解决方案，可以在任何地方使用。

Answer 15

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

Answer 16

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

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

    float: left;
}

完成了。

Answer 17

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

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

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

http://cdpn.io/dKIjo

Answer 18

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 19

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 20

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

css

float: left;

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

Answer 21

使用PHP括号：

＆＃13;

ul li {
  display: inline-block;
}

＆＃13;

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

＆＃13;

Answer 22

我将继续扩展user5609829的答案，因为我相信其他解决方案太复杂/太多工作。将margin-right: -4px应用于内联块元素将删除间距，并受所有浏览器支持。查看更新的小提琴here。对于那些使用负边距的人，请尝试阅读this。

Answer 23

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

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

p {
  text-space-collapse: discard;
}

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

Answer 24

我在React和Sass尝试了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

Answer 25

我以为我要为这个问题添加一些新内容，尽管当前提供的许多答案已足够且相关，但有些CSS新属性可以实现非常清晰的输出，并在所有浏览器中均提供全面支持，几乎没有“骇客”。确实远离inline-block，但可以为您提供与所要问题相同的结果。

这些CSS属性为grid

除IE之外，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 26

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

负边距

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

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

Answer 28

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

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

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

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

当我们分配一个大于额外空间宽度的值（例如-1em）时似乎没问题。
但是，当我们设置更大的值word-spacing时，margin-left和-1em将无法正常使用。
当我们尝试将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，发现了这个：

长度

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

这似乎就是原因。

Answer 31

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

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

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

Answer 32

<ImageBackground source={require('../../assets/images/body-diagram.png')} style={{width: 200, height: 600, flexDirection: 'column'}}

<TouchableOpacity onPress={() => alert('first pressed')}>
  <Text>First Area</Text>
</TouchableOpacity>

<TouchableOpacity onPress={() => alert('second pressed')}>
  <Text>Second Area</Text>
</TouchableOpacity>

<TouchableOpacity onPress={() => alert('third pressed')}>
  <Text>Third Area</Text>
</TouchableOpacity>

<ImageBackground/>

Answer 33

使用这些技巧之一

删除空格
负利润
跳过结束标记（无论如何，HTML5都无关紧要）
将字体大小设置为零（字体大小为零的空间为...零宽度）
使用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>

Answer 34

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

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

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

Answer 35

尝试删除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 36

我找到的另一种方法是将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 37

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

span {
    display: table-cell;
}

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＆＃39;溶液

您可以在此链接purecss中查看此框架。享受：）

＆＃13;

.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%;
}

＆＃13;

<div class="row">

    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>

</div>

＆＃13;

Answer 39

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

负边距

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

字体大小为零

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

略过结束标记

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

Answer 40

试试这个代码段：

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 41

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

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

41 个答案:

更新

HTML

CSS