如何删除内联块元素之间的空格？

Question

鉴于此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>

但是,我希望CSS解决方案不要求HTML源代码被篡改.

我知道如何用JavaScript解决这个问题 - 通过从容器元素(段落)中删除文本节点,如下所示:

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

演示: http ://jsfiddle.net/dGHFV/1/

但是这个问题可以单独用CSS解决吗？

Answer 1

由于这个答案已经变得相当流行,我正在重写它.

我们不要忘记提出的实际问题:

如何删除内联块元素之间的空格？我希望CSS解决方案不要求HTML源代码被篡改.只用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>
  

  http://jsfiddle.net/thirtydot/dGHFV/1362/

• 或这个:

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

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

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

Answer 2

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

请参阅:http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing

Answer 3

好吧,虽然我已经投了赞font-size: 0;和not implemented CSS3 feature答案,但在尝试之后我发现其中没有一个是真正的解决方案.

实际上,没有强烈的副作用,甚至没有一种解决方法.

然后我决定inline-block从我的HTMLsource(JSP)的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>

这是丑陋的,但工作.

但是,等一下...如果我发生什么在我的div的Taglibs loops(Struts2,JSTL,等...)？

例如:

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

Answer 4

在元素之间添加注释以不具有空格.对我来说,比将字体大小重置为零然后重新设置更容易.

<div>
    Element 1
</div><!--
--><div>
    Element 2
</div>

Answer 5

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

使用Flexbox

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

• 我们准备好使用Flexbox吗？
• 使用CSS灵活框 - Web开发人员指南| MDN
• Flexbox完整指南| CSS-技巧
• Flexy Boxes - CSS flexbox游乐场和代码生成工具

Answer 6

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

实际上有一种非常简单的方法可以从内联块中删除空白,这既简单又语义.它被称为具有零宽度空间的自定义字体,它允许您使用非常小的字体折叠字体级别的空格(由浏览器添加内嵌元素,当它们位于不同的行上时).一旦你声明了字体,你就可以改变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分钟.@font-face包含css 声明:zipped零宽度空格字体.它位于Google云端硬盘中,因此您需要点击文件>下载将其保存到您的计算机.如果将声明复制到主css文件,则可能还需要更改字体路径.

Answer 7

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

Answer 8

另外两个基于CSS Text Module Level 3的选项(而不是white-space-collapsing:discard从规范草案中删除):

• word-spacing: -100%;

从理论上讲,它应该完全符合要求 - 将'字'之间的空格缩短100%的空格字符宽度,即缩短为零.但遗憾的是,似乎无法在任何地方工作,并且此功能被标记为"有风险"(它也可以从规范中删除).

• word-spacing: -1ch;

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

小提琴

Answer 9

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

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

Answer 10

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

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

Answer 11

简单:

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

无需触摸父元素.

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

0.25em 是默认值 word-spacing

W3Schools - 字间距属性

Answer 12

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

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

Answer 13

虽然从技术上讲不是问题的答案:"如何删除内联块元素之间的空间？"

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

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

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

Answer 14

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

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

    float: left;
}

并做了.

Answer 15

我现在遇到了这个问题而且font-size:0;我发现在Internet Explorer 7中问题仍然存在,因为Internet Explorer认为"字体大小为0？!？!WTF你是疯子吗？" - 所以,在我的情况下,我有Eric Meyer的CSS重置,并且font-size:0.01em;我有一个像素从Internet Explorer 7到Firefox 9,所以,我认为这可以是一个解决方案.

Answer 16

通常我们在不同的行中使用这样的元素,但是如果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给子元素.

p {
  font-size: 0;
}
p span {
  display: inline-block;
  background: red;
  font-size: 14px;
}

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

上述方法可能无法在某处运行,具体取决于整个应用程序,但最后一种方法是针对这种情况的万无一失的解决方案,可以在任何地方使用.

Answer 17

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

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

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

http://cdpn.io/dKIjo

Answer 18

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>

Answer 19

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

Answer 20

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

css

float: left;

代码笔链接：http : //jsfiddle.net/dGHFV/3560/