提问



鉴于此HTML和CSS:




span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}

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



由于这个答案已经变得相当流行,我将重写它。


让我们不要忘记被问到的实际问题:



  如何删除内联块元素之间的空格?我希望
  对于不需要HTML源代码的CSS解决方案
  篡改。 单独使用CSS可以解决此问题吗?



可以单独用CSS来解决这个问题,但是没有完全强大的CSS修复。


我在初始答案中的解决方案是将font-size: 0添加到父元素,然后在子元素上声明一个合理的font-size


http://jsfiddle.net/thirtydot/dGHFV/1361/[107]


这适用于所有现代浏览器的最新版本。它适用于IE8。它在Safari 5中不起作用,但它 在Safari 6中工作.Safari 5几乎是一个死的浏览器(0。03%,2015年8月)。[108]


相对字体大小的大多数可能问题并不复杂。


但是,虽然这是一个合理的解决方案,如果您特别需要只修复CSS,如果您可以随意更改HTML(我们大多数人都是),那么这不是我的建议。





这是我作为一个经验丰富的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/[109]

  • 或者,这个:


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

  • 或者,你甚至可以完全跳过某些结束标签(所有浏览器都可以这样):[110] [111]


    <ul>
        <li>Item 1
        <li>Item 2
        <li>Item 3
    </ul>
    



现在我已经走了,用千种不同的方式去除空白,通过thirtydot让你感到无聊,希望你们已经忘记了所有font-size: 0





或者,您现在可以使用flexbox来实现许多以前使用内联块的布局:https://css-tricks.com/snippets/css/a-guide-to-flexbox/[112]]] [113]

最佳参考


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


见:http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing [114]

其它参考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(Struts2JSTL等中生成我的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虽然被空洞的评论所侵扰,
将导致正确缩进;


让我们来看第一个例子,imho:


    <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


这是我在相关上给出的相同答案:显示:内联块 - 那是什么空间?


实际上有一种非常简单的方法可以从内联块中删除空白,这既简单又语义。它被称为具有零宽度空间的自定义字体,它允许您使用非常小的字体折叠空格(在浏览器中为内联元素添加它们在单独的行上时使用非常小的字体)。一旦声明了字体,你只需要改变容器上的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文件中,您可能还需要更改字体路径。[116]

其它参考4


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


使用Flexbox [117]


它很棒,解决了所有这些内联块布局,并且截至2017年有98%的浏览器支持(如果你不关心旧IE,则更多)。 [118]



  • 我们准备好使用Flexbox吗?

  • 使用CSS灵活方框 - Web开发人员指南| MDN

  • Flexbox完整指南| CSS-技巧

  • Flexy Boxes - CSS flexbox游乐场和代码生成工具


其它参考5


另外两个基于CSS文本模块级别3(而不是white-space-collapsing:discard的选项已从规范草案中删除):[119] [120] [121] [122] [123]



  • word-spacing: -100%;



从理论上讲,它应该完全符合要求 - 缩短空白
    字之间的空格字符宽度的100%,即
    零。但不幸的是,似乎并没有在任何地方工作
    功能标记为有风险(也可以从规范中删除)。



  • word-spacing: -1ch;



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


小提琴[125]

其它参考6


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>



不幸的是,它是2015年,white-space-collapse仍未实施。


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

其它参考7


使用flexbox并对旧版浏览器进行回退(来自上述建议):


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

其它参考8


字体大小: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/[126]


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

其它参考9


简单:


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


无需触摸父元素。


仅限条件:项目的字体大小不得定义(必须等于父级的字体大小)。


0.25em是默认word-spacing


W3Schools - 字间距属性[127]

其它参考10


虽然,技术上不是问题的答案:
如何删除内联块元素之间的空格?


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


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


您可以在以下链接中了解有关它的更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/[128]

其它参考11


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

其它参考12


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


标记位于不同行的示例:




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

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



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


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


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


http://cdpn.io/dKIjo[129]

其它参考13


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


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

    float: left;
}


并做了。

其它参考14




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>



我认为有一个非常简单/旧的方法,所有浏览器甚至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>



使用PHP括号:




ul li {
  display: inline-block;
}

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



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

其它参考15


CSS Text Module Level 4规范定义了text-space-collapse属性,它允许控制元素内部和周围的空白区域的处理方式。[132]


所以,关于你的例子,你只需写这个:


p {
  text-space-collapse: discard;
}


不幸的是,没有浏览器正在实施此属性(截至2016年9月),如HBP答案的评论中所述。

其它参考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>


这是Plunker。[134]

其它参考17


我尝试了font-size: 0解决React和Sass中类似问题的解决方案,用于我目前正在进行的免费代码营项目。[135]


它的工作原理!


一,脚本:


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

其它参考18


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



有很多解决方案,如font-size:0word-spacingmargin-leftletter-spacing等。


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



  1. 当我们指定一个大于额外空间宽度的值时,似乎没问题(例如-1em)。

  2. 然而,当我们设置更大的值-1em时,word-spacingmargin-left不会好的。

  3. 当我们尝试将em用作font-size单位时,使用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>



这个问题最简单的答案就是添加。


CSS


float: left;


codepen链接:http://jsfiddle.net/dGHFV/3560/[136]

其它参考19


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

其它参考20


试图消除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>



我找到了一个纯CSS解决方案,在所有浏览器中都很适合我:


span {
    display: table-cell;
}