这篇博客讨论了如何在HTML中删除内联块元素之间的空间，而不修改HTML源代码。作者列举了多种CSS解决方案，包括设置`font-size: 0`然后在子元素中恢复字体大小，使用负`letter-spacing`，以及利用CSS Flexbox和Grid布局。还提到了一些浏览器兼容性和特定情况下的处理方法。
鉴于此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即可解决此问题吗？
#1楼
好的，尽管我都赞成两个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>
#2楼
在元素之间添加注释 ，不能有空格。 对我来说，这比将字体大小重置为零然后再设置回零容易。
<div>
Element 1
</div><!--
--><div>
Element 2
</div>
#3楼
基于CSS文本模块第3级的另外两个选项（而不是从规范草案中删除的white-space-collapsing:discard ）：
-
word-spacing: -100%;
从理论上讲，它应该完全满足需要-将“单词”之间的空格缩短100％的空格字符宽度，即为零。 但不幸的是，它似乎无法在任何地方使用，并且此功能被标记为“有风险”（也可以从规范中删除）。
-
word-spacing: -1ch;
它通过数字“ 0”的宽度缩短字间间隔。 在等宽字体中，它应完全等于空格字符（以及其他任何字符）的宽度。 它可以在Firefox 10 +，Chrome 27+和IE 9+中运行。
#4楼
我最近一直在解决这个问题，而不是先设置父font-size:0然后将子级设置回合理的值，而是通过设置父容器letter-spacing:-.25em然后是子级，获得了一致的结果返回letter-spacing:normal 。
在另一个话题中，我看到一个评论者提到font-size:0并不总是理想的，因为人们可以在浏览器中控制最小字体大小，从而完全消除了将font-size设置为零的可能性。
无论指定的字体大小是100％，15pt还是36px，使用ems似乎都可以工作。
#5楼
使用flexbox并针对旧版浏览器进行后备（来自以上建议）：
ul {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
#6楼
这是我在相关内容上给出的相同答案： 显示：内联块-那是什么空间？
实际上，有一种非常简单的方法可以从内联块中删除空白，这既简单又语义。 它被称为带有零宽度空格的自定义字体，它允许您使用非常小的字体在字体级别折叠空白（当行内元素位于单独的行时由浏览器添加的空白）。 声明字体后，只需在容器上更改font-family ，然后再在子级上更改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声明： 压缩零宽度空格字体 。 它位于Google云端硬盘中，因此您需要点击文件>下载以将其保存到计算机中。 如果将声明复制到主CSS文件中，则可能还需要更改字体路径。
#7楼
font-size：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"上使用class="items"。
您无需为新的内联块返回css，并添加另一个css规则。
一次解决两个问题。
还要注意> （大于符号），这意味着* /所有子代都应为内联块。
注意：我进行了修改，以适应当包装器有子包装器时继承字母间距。
#8楼
display:inline-block所有空间消除技术都是讨厌的骇客...
使用Flexbox
很棒，解决了所有这些内联块布局bs，并且到2017年为止具有98％的浏览器支持 （如果您不关心旧IE的话，更多）。
#9楼
不幸的是，这是2019年， white-space-collapse仍然没有实现。
同时，给父元素font-size: 0; 并在子font-size上设置font-size 。 这应该可以解决问题
#10楼
添加display: flex; 到父元素。 这是带有前缀的解决方案：
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> 更新资料
简化版👇
p { display: flex; } span { width: 100px; background: tomato; font-size: 30px; color: white; text-align: center; } <p> <span> Foo </span> <span> Bar </span> </p> #11楼
通常，我们在不同的行中使用这样的元素，但是在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: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> 根据整个应用程序的不同，上述方法可能无法在某处工作，但是最后一种方法是针对这种情况的万无一失的解决方案，可以在任何地方使用。
#12楼
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> #13楼
我将进一步扩展user5609829的答案，因为我相信这里的其他解决方案太复杂/工作量太大。 margin-right: -4px内元素上应用margin-right: -4px会删除间距，并且所有浏览器都支持。 在这里查看更新的小提琴。 对于那些关注使用切缘阴性，尝试给这个一读。
#14楼
我找到了一个纯CSS解决方案，该解决方案在所有浏览器中都非常适合我：
span {
display: table-cell;
}
#15楼
简单：
item {
display: inline-block;
margin-right: -0.25em;
}
无需触摸父元素。
唯一的条件是：不得定义项目的字体大小（必须等于父项的字体大小）。
0.25em是默认的word-spacing
#16楼
在容器元素中添加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>
这是柱塞 。
#17楼
CSS文本模块4级规范定义了一个text-space-collapse属性，该属性允许控制元素内部和周围的空白处理方式。
因此，对于您的示例，您只需编写以下代码：
p {
text-space-collapse: discard;
}
不幸的是，如HBP答案的注释中所述，尚无浏览器实现此属性（截至2016年9月）。
#18楼
我发现的另一种方法是，将行的第一个元素以外的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;
}
#19楼
我为我目前正在从事的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')
);
然后，Sass：
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
#20楼
我不太确定是要形成两个没有间距的蓝色范围还是要处理其他空白，但是如果您要消除该间距：
span {
display: inline-block;
width: 100px;
background: blue;
font-size: 30px;
color: white;
text-align: center;
float: left;
}
并做了。
#21楼
但是，从技术上讲，并不是对以下问题的答案：“如何删除内联块元素之间的空间？”
您可以尝试flexbox解决方案并应用下面的代码，空格将被删除。
p {
display: flex;
flex-direction: row;
}
您可以通过以下链接了解更多信息： https : //css-tricks.com/snippets/css/a-guide-to-flexbox/
#22楼
我认为有一个非常简单/旧的方法，所有浏览器甚至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> #23楼
每个试图删除inline-block s之间的空间的问题在我看来都是一个<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> #24楼
使用PHP括号：
ul li { display: inline-block; } <ul> <li> <div>first</div> </li><? ?><li> <div>first</div> </li><? ?><li> <div>first</div> </li> </ul> #25楼
只是为了好玩：一个简单的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> #26楼
由于此答案已变得非常流行，因此我将对其进行大量重写。
我们不要忘记提出的实际问题：
如何删除内联块元素之间的空间？ 我希望找到一种不需要篡改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>
是的，这是正确的。 我删除了inline-block元素之间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>或这个：
<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 。
或者，您现在可以使用flexbox来实现以前可能用于inline-block的许多布局： https : //css-tricks.com/snippets/css/a-guide-to-flexbox/
#27楼
对于符合CSS3的浏览器，可以使用white-space-collapsing:discard
参见： http : //www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing
#28楼
有很多解决方案，例如font-size:0 ， word-spacing ， margin-left ， letter-spacing等。
通常我更喜欢使用letter-spacing因为
- 当我们分配的值大于多余空间的宽度（例如
-1em）时，这似乎-1em。 - 但是，当我们设置更大的值（如
-1em时，用word-spacing和margin-left-1em。 - 当我们尝试使用
em作为font-size单位时，使用font-size并不方便。
因此， letter-spacing似乎是最佳选择。
但是我要警告你
当您使用letter-spacing ，最好使用-0.3em或-0.31em而不是其他letter-spacing 。
* { 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并发现了这一点：
长度
除了字符之间的默认间隔外，还指定额外的字符间间隔。 值可能为负，但可能存在特定于实现的限制。 用户代理不得进一步增加或减少字符间空间以证明文本合理。
看来这就是原因。
#29楼
这个问题的最简单答案是添加。
的CSS
float: left;
codepen链接： http ： //jsfiddle.net/dGHFV/3560/
#30楼
添加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> #31楼
我以为我会在这个问题上添加一些新内容，尽管当前提供的许多答案已足够且相关，但有些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> #32楼
我现在从font-size:0;遇到这个问题font-size:0; 我发现在Internet Explorer 7中问题仍然存在，因为Internet Explorer认为“字体大小0？！？！WTF您是疯子吗？”。 -因此，就我而言，我已经重置了Eric Meyer的CSS，并且使用font-size:0.01em; 从Internet Explorer 7到Firefox 9，我的像素相差1个像素，因此，我认为这可以解决。
扫一扫
324
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
