消极的保证金

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

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

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

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

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

p {
  text-space-collapse: discard;
}

不幸的是，在HBP回答的评论中提到，目前还没有浏览器实现这个属性(截至2016年9月)。

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

为什么不像这样……有点粗糙，取决于你的CSS单元代码，但是:

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

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

这是相同的答案，我给了相关的:显示:内联块-什么是空间?

实际上，有一种非常简单的方法可以从内联块中删除空白，既简单又语义化。它被称为具有零宽度空格的自定义字体，它允许您使用非常小的字体在字体级别上折叠空白(当它们在单独的行上时，由浏览器为内联元素添加)。一旦你声明了字体，你只需要在容器上改变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 generator进行转换。我只花了5分钟。css @font-face声明包括:压缩零宽度空格字体。它在谷歌驱动器，所以你需要点击文件>下载保存到你的电脑。如果您将声明复制到主css文件中，您可能还需要更改字体路径。