消极的保证金

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

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

不过，严格来说，这并不是问题的答案: “如何删除内联块元素之间的空格?”

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

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

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

我在React和Sass的一个Free Code Camp项目中尝试了字体大小: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

我现在遇到了这个问题from font-size:0;我发现在ie7中这个问题仍然存在，因为ie7认为“字体大小为0?!?!”你疯了吗?”-所以，在我的情况下，我有Eric Meyer的CSS重置和字体大小:0.01em;我在ie7和Firefox 9之间有1个像素的差异，所以，我认为这是一个解决方案。

2021的解决方案

不幸的是，空白折叠仍然没有实现。

同时，给父元素font-size: 0;然后设置子字体的字体大小。这应该能奏效

有很多解决方案，如字体大小:0，字间距，左距，字母间距等等。

通常我更喜欢使用字母间距，因为

当我们分配一个大于额外空间宽度的值时，这似乎是可以的。1 em)。 然而，当我们设置更大的值如-1em时，word-spacing和margin-left就不合适了。 当我们尝试使用em作为字体大小单位时，使用font-size并不方便。

所以，字母间距似乎是最好的选择。

但是，我必须警告你

当你使用字母间距时，最好使用-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，发现了这个:

长度 指定除了默认字符间距之外的额外字符间距。值可能是负的，但可能存在特定于实现的限制。用户代理不能为了使文本正确而进一步增加或减少字符间的空间。

看来这就是原因。