如何去除内嵌块元素之间的空间？
鉴于这个HTML和CSS：
span { display:inline-block; width:100px; background-color:palevioletred; } <p> <span> Foo </span> <span> Bar </span> </p>
因此，SPAN元素之间会有4px的空间。
演示： http : //jsfiddle.net/dGHFV/
我明白为什么会发生这种情况，而且我也知道可以通过删除HTML源代码中的SPAN元素之间的空白来消除该空间，如下所示：
<p> <span> Foo </span><span> Bar </span> </p>
但是，我希望有一个不需要HTML源代码被篡改的CSS解决scheme。
我知道如何用JavaScript解决这个问题 – 通过从容器元素（段落）中删除文本节点，如下所示：
// jQuery $('p').contents().filter(function() { return this.nodeType === 3; }).remove();
演示： http : //jsfiddle.net/dGHFV/1/
但是，这个问题可以用CSS来解决吗？
由于这个答案已经变得相当stream行，我正在重写它。
我们不要忘记被问到的实际问题：
如何去除内嵌块元素之间的空间？ 我希望有一个不需要HTML源代码被篡改的CSS解决scheme。 这个问题可以用CSS来解决吗？
可以用CSS来解决这个问题，但是没有完全可靠的CSS修正。
我在最初的答案中的解决scheme是将font-size: 0添加到父元素，然后在子元素上声明一个合理的font-size 。
http://jsfiddle.net/thirtydot/dGHFV/1361/
这适用于所有现代浏览器的最新版本。 它在IE8中工作。 它在Safari 5 中不起作用，但在Safari 6 中起作用.Safari 5几乎是一个死的浏览器（ 2015年8月的0.33％ ）。
相对字体大小的大多数可能的问题并不复杂。
但是，如果您特别需要 CSS修正，这是一个合理的解决scheme，但如果您可以自由更改HTML（如我们大多数人），则不是我所推荐的。
这就是我作为一个经验丰富的网页开发人员，实际上是为了解决这个问题：
<p> <span>Foo</span><span>Bar</span> </p>
恩，那就对了。 我在内嵌块元素之间的HTML中删除空格。
这很容易。 这很简单。 它无处不在。 这是务实的解决scheme。
你有时必须仔细考虑空白的来源。 将附加的另一个元素与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> -
或者， 你甚至可以完全跳过某些结束标签（所有的浏览器都可以）：
<ul> <li>Item 1 <li>Item 2 <li>Item 3 </ul>
现在我已经厌倦了用“千种不同的方法来删除空白，十三岁”，你死了，希望你已经忘记了所有关于font-size: 0 。
或者，您现在可以使用flexbox来实现以前用于内联块的许多布局： https : //css-tricks.com/snippets/css/a-guide-to-flexbox/
对于符合CSS3的浏览器，有white-space-collapsing:discard
请参阅： http : //www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing
好吧，虽然我upvoted两个font-size: 0; 和not implemented CSS3 feature答案，尝试后，我发现他们都没有一个真正的解决scheme 。
其实，没有强大的副作用，甚至没有一个解决方法。
然后， 我决定从我的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>
这是不可读的，难以理解，等等…
我发现的解决scheme：
使用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>
这是我给出的相关答案相同的答案： 显示：行内块 – 这是什么空间？
实际上有一个非常简单的方法来从内联块中删除空白，这既简单又语义。 它被称为具有零宽度空间的自定义字体，它允许您使用非常小的字体在字体级别折叠空白（由内嵌元素的浏览器在分隔线上时添加）。 一旦你声明了字体，你只需要改变容器上的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文件中，您可能还需要更改字体path。
所有的空间消除技术display:inline-block是讨厌的黑客…
使用Flexbox
这真棒，解决了所有这些内嵌块布局bs，截至2017年有98％的浏览器支持 （更多，如果你不关心旧的IE 浏览器 ）。
- 我们准备好使用Flexbox吗？
- 使用CSS灵活框 – Web开发人员指南| MDN
- Flexbox完整指南| CSS-技巧
- Flexy Boxes – CSS flexbox操场和代码生成工具
基于CSS文本模块级别3的另外两个选项（而不是white-space-collapsing:discard从规格草案中删除）：
-
word-spacing: -100%;
从理论上讲，应该做到所需要的东西 – 将空间字符宽度的100％缩小到“单词”之间的空格，即零。 但不幸的是，似乎没有在任何地方工作，这个function被标记为“有风险”（也可以从规范中删除）。
-
word-spacing: -1ch;
通过数字“0”的宽度缩短字间空格。 在等宽字体中，它应该完全等于空格字符的宽度（以及任何其他字符）。 这适用于Firefox 10+，Chrome 27+，几乎适用于IE9 +
小提琴
不幸的是，这是2015年， white-space-collapse还没有实施。
同时给父元素font-size: 0; 并设置孩子的font-size 。 这应该做的伎俩
为什么不使用flexbox，并为旧版浏览器做一个后备（从上面的build议）。
ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
添加display: flex; 到父元素。 这里是带有前缀的soution
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>
字体大小：0; 可以有点棘手的pipe理…
我认为下面的几条线比其他任何方法都好得多，可以重复使用，节省时间。 我个人使用这个：
.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规则，为您的新内联块。
一次解决两个问题。
还要注意> （大于号），这意味着* /所有的孩子应该内联块。
注：我已经修改，以适应包装器具有子包装器时inheritance字母间距。
简单：
item { display: inline-block; margin-right: -0.25em; }
不需要触摸父元素。
只有在这里条件：项目的字体大小不能被定义（必须等于父母的字体大小）。
0.25em是默认的word-spacing
w3schools – 字间距属性
您可以尝试flexbox并应用下面的代码，空间将被删除。
p { display: flex; flex-direction: row; }
您可以通过以下链接了解更多信息： https : //css-tricks.com/snippets/css/a-guide-to-flexbox/
我现在有这个问题，并从font-size:0; 我发现，在IE7的问题仍然是因为IE认为“字体大小0？！？！跆拳道是你疯了吗？ – 所以，在我的情况下，我已经font-size:0.01em;的CSS重置和font-size:0.01em; 我有一个从IE7到FF9的1px的差异，所以，我认为这可以是一个解决scheme。
一般来说，我们在不同的行中使用这样的元素，但是在display:inline-block情况下display:inline-block使用同一行中的标签的display:inline-block将删除空间，但在不同的行中不会
带有不同行中标签的示例
p span { display: inline-block; background: red; }
<p> <span> Foo </span> <span> Bar </span> </p>
我不确定你是否想让两个蓝色的跨度没有差距，或者想要处理其他的空白区域，但是如果你想消除这个空白，
span { display:inline-block; width:100px; background:blue; font-size:30px; color:white; text-align:center; float:left; }
并做了。
希望它可以帮助你。
我一直在解决这个问题，而不是设置父font-size:0然后设置孩子回到一个合理的价值，我已经得到一致的结果，通过设置父容器letter-spacing:-.25em那么孩子回到letter-spacing:normal 。
在另一个线程中，我看到一位评论者提到font-size:0并不总是理想的，因为人们可以在浏览器中控制最小的字体大小，完全否定将字体大小设置为零的可能性。
无论指定的字体大小是100％，15pt还是36px，使用ems似乎都能正常工作。
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的答案一点，因为我相信这里的其他解决scheme太复杂/太多的工作。 margin-right: -4px联块元素应用margin-right: -4px将删除间距，并受所有浏览器支持。 在这里看到更新的小提琴。 对于那些使用负边距的人来说，试试看这个 。
我认为这是一个非常简单/旧的方法，所有的浏览器甚至IE 6/7支持。 我们可以简单地将letter-spacing设置为父级中的大负值，然后在子元素中将其设置回normal ：
body {font-size: 24px} .container.no-spacing { letter-spacing: -1em; /* => could be a large negative value */ } .item { padding: 2px; border: 1px solid #b0b0c0; /* show edges */ letter-spacing: normal; /* => back to normal letter-spacing */ }
<p style="color:red">Wrong (default spacing):</p> <div class="container"> <span class="item">Item-1</span> <span class="item">Item-2</span> <span class="item">Item-3</span> </div> <hr/> <p style="color:green">Correct (no-spacing):</p> <div class="container no-spacing"> <span class="item">Item-1</span> <span class="item">Item-2</span> <span class="item">Item-3</span> </div>
用php括号。
ul li { display: inline-block; }
<ul> <li> <div>first</div> </li><? ?><li> <div>first</div> </li><? ?><li> <div>first</div> </li> </ul>
<ul class="items"> <li>Item 1</li><?php ?><li>Item 2</li><?php ?><li>Item 3</li> </ul>
就这样。 在其他郎类比
我发现了一个纯CSS的解决scheme，在所有浏览器中都非常好用：
span { display: table-cell; }
将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
从Inline块元素中删除空格有许多方法：
-
负边际
div a {display：inline – block; 保证金 – 右：-4 px; }
-
字体大小为零
nav {font – size：0; } nav a {font – size：16 px; }
-
跳过结束标记
<ul> <li>一个<li>两个<li>三个</ ul>
CSS文本模块级别4规范定义了text-space-collapse属性，它允许控制处理元素内部和周围的空白区域的方式。
所以，关于你的例子，你只需要写这个：
p { text-space-collapse: discard; }
不幸的是，如HBP的回答中所述，浏览器尚未实现此属性（截至2016年9月）。
我发现另一种方法是将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; }
在CSS中有一个简单的解决scheme，例如：
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; }
在我看来写字体大小：0它是不安全的，当你在项目中使用像EM，所以我更喜欢purecss解决scheme。 你可以在这个链接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>
我试用了font-size：0解决scheme来解决React JS和SASS中类似的问题，这个问题我正在使用Free Code Camp项目。
它的工作原理！
一，脚本：
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
每个问题，试图删除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>
