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

HTML

猴子蛋蛋

2020-03-13

鉴于此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就能解决这个问题吗？

第1566篇《如何删除内联块元素之间的空间？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共24个回答

小小小胖 2020.03.13

I found a pure CSS solution that worked for me very well in all browsers:

span {
    display: table-cell;
}

Pro梅 2020.03.13

One another way I found is applying margin-left as negative values except the first element of the row.

span { 
 display:inline-block;
 width:100px;
 background:blue;
 font-size:30px;
 color:white; 
 text-align:center;
 margin-left:-5px;
}
span:first-child{
 margin:0px;
}

小胖凯前端 2020.03.13

Add letter-spacing:-4px; on parent p css and add letter-spacing:0px; to your 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>

西里凯 2020.03.13

Every question, that try to remove the space between inline-blocks seems like a <table> to me...

Try something like this:

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>

樱理查德 2020.03.13

The CSS Text Module Level 4 specification defines a text-space-collapse property, which allow to control the how white space inside and around an element is processed.

So, regarding your example, you would just have to write this:

p {
  text-space-collapse: discard;
}

Unfortunately, no browser is implementing this property yet (as of September 2016) as mentioned in the comments to the answer of HBP.

YOC45692046 2020.03.13

Add white-space: nowrap to the container element:

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>

Here is the Plunker.

飞云西门Near 2020.03.13

The simplest answer to this question is to add.

css

float: left;

codepen link: http://jsfiddle.net/dGHFV/3560/

蛋蛋猴子前端 2020.03.13

With PHP brackets:

ul li {
  display: inline-block;
}

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

乐猪猪 2020.03.13

I think there is a very simple/old method for this which is supported by all browsers even IE 6/7. We could simply set letter-spacing to a large negative value in parent and then set it back to normal at child elements:

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>

路易猴子Pro 2020.03.13

我最近一直在处理这个问题，而不是font-size:0先设置父容器，letter-spacing:-.25em然后再将孩子设置回合理的值，而不是先设置父容器，然后再将孩子设置回合理的值letter-spacing:normal。

在另一个话题中，我看到一个评论者提到的font-size:0内容并不总是理想的，因为人们可以在其浏览器中控制最小字体大小，从而完全消除了将字体大小设置为零的可能性。

Using ems appears to work regardless of whether the font-size specified is 100%, 15pt or 36px.

http://cdpn.io/dKIjo

Green小宇宙伽罗 2020.03.13

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>

Gil宝儿 2020.03.13

通常，我们在不同的行中使用类似的元素，但是如果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>

根据整个应用程序的不同，上述方法可能无法在某处工作，但是最后一种方法是针对这种情况的万无一失的解决方案，可以在任何地方使用。

小小Stafan宝儿 2020.03.13

我不太确定是要创建两个没有间距的蓝色跨度还是要处理其他空白，但是如果要消除该间距，请执行以下操作：

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

    float: left;
}

并做了。

GilTom 2020.03.13

我现在遇到了这个问题，从中font-size:0;我发现在Internet Explorer 7中问题仍然存在，因为Internet Explorer认为“字体大小0？！？！WTF是您疯子吗？”。-因此，就我而言，我重置了Eric Meyer的CSS，font-size:0.01em;从Internet Explorer 7到Firefox 9，我的像素相差1个像素，因此，我认为这可以解决。

L路易 2020.03.13

使用flexbox并针对旧版浏览器进行后备（来自以上建议）：

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

MandyTom 2020.03.13

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"在每个内联块的父级上使用。

您无需为新的内联块返回css，并添加另一个css规则。

一次解决两个问题。

另请注意>（大于符号），这意味着* /所有子代均应为内联块。

http://jsfiddle.net/fD5u3/

注意：我进行了修改，以适应在包装器有子包装器时继承字母间距。

小哥宝儿 2020.03.13

但是，从技术上讲，并不是对以下问题的答案：“如何删除内联块元素之间的空间？”

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

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

您可以通过以下链接了解更多信息：https : //css-tricks.com/snippets/css/a-guide-to-flexbox/

LEY蛋蛋 2020.03.13

不幸的是，这是2019年，white-space-collapse但尚未实施。

同时，指定父元素font-size: 0;并在子元素上设置font-size。这应该可以解决问题

otaku若 2020.03.13

简单：

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

无需触摸父元素。

唯一的条件是：不得定义该项的字体大小（必须等于父项的字体大小）。

0.25em 是默认值 word-spacing

W3Schools-字距属性

前端飞云 2020.03.13

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

word-spacing: -100%;

从理论上讲，它应该完全满足需要-将“单词”之间的空格缩短100％的空格字符宽度，即为零。但不幸的是，它似乎无法在任何地方使用，并且此功能被标记为“有风险”（也可以从规范中删除）。

word-spacing: -1ch;

它通过数字“ 0”的宽度缩短了字间距。在等宽字体中，它应完全等于空格字符（以及其他任何字符）的宽度。它可以在Firefox 10 +，Chrome 27+和IE 9+中运行。

小提琴

小哥Eva 2020.03.13

在元素之间添加注释，不能有空格。对我来说，这比将字体大小重置为零然后再设置回零容易。

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

Jim米亚西里 2020.03.13

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

MandyEva 2020.03.13

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

使用Flexbox

很棒，解决了所有这些内联块布局bs，并且到2017年为止，浏览器支持率达到98％（如果您不关心旧的IE，则更多）。

古一斯丁猴子 2020.03.13

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

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

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答

Ace Editor一款比较好用的展示代码组件

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android