显示：内联块 - 那个空间是啥？ [复制]

Posted 2023-03-06

【中文标题】显示：内联块 - 那个空间是啥？ [复制]

【英文标题】：Display: Inline block - What is that space? [duplicate]显示：内联块 - 那个空间是什么？ [复制]

【发布时间】：2013-05-16 17:55:46

【问题描述】：

内联块之间有这个奇怪的空间。我可以忍受它，如果我通过 AJAX 调用加载更多内容，那么微小的空间就会消失。我知道我在这里遗漏了一些东西。

div 
    width: 100px;
    height: auto;
    border: 1px solid red;
    outline: 1px solid blue;
    margin: 0;
    padding: 0; 
    display: inline-block;

http://jsfiddle.net/AWMMT/

Inline 块中的间距如何保持一致？

【问题讨论】：

内联格式上下文中的元素将导致回车中的空格和 html 中的空格 - 您可以手动删除空格，也可以将其注释掉。不幸的是，2.1 规范没有详细说明这种行为

css-tricks.com/fighting-the-space-between-inline-block-elements

@cimmanon 最佳答案是指向 css-tricks！谢谢。

davidwalsh.name/remove-whitespace-inline-block

【参考方案1】：

空格在 HTML 中。有几种可能的解决方案。从最好到最差：

删除 HTML 中的实际空间（理想情况下，您的服务器可以在提供文件时为您执行此操作，或者至少您的输入模板可以适当间隔）http://jsfiddle.net/AWMMT/2/ 使用float: left 而不是display: inline-block，但这会对身高产生不良影响：http://jsfiddle.net/AWMMT/3/ 将容器的font-size 设置为0，并为内部元素设置一个适当的font-size：http://jsfiddle.net/AWMMT/4/——这很简单，但是你不能利用内部元素的相对字体大小规则（百分比，em）

【讨论】：

我已经漂浮了很长时间，并希望现在将我的框显示为内联块，但这只会使标记有点不可靠。我的意思是 - 布局可能会因为一个简单的空白而被破坏。谢谢。

大多数浏览器都提供最小字体大小设置，使得font-size: 0 完全不可靠。

我删除了服务器端循环中的空格，并添加了关于 php 中的内联块和奇怪的标签对齐的明确注释。

@cimmanon 定义“大多数浏览器”，因为我从未见过这种情况（尽管我同意这不是理想的选择；删除空格可能是最好的，至少目前如此）

Opera 一直拥有它，Chrome、Firefox、Safari。对我来说似乎是“大多数浏览器”。

【参考方案2】：

http://jsfiddle.net/AWMMT/1/

<div>...</div><div>...</div>
              ^
              |--- no whitespace/new line here.

您的空格是浏览器在显示时转换为“空格”的新行。

或者你可以尝试用 CSS 破解一下：

flexbox 可以方便地忽略其子元素之间的空白，并且将类似于连续的内联块元素显示。

http://jsfiddle.net/AWMMT/470/

body  display: flex; flex-wrap: wrap; align-items: end; 

旧答案（仍然适用于旧的、pre-flexbox 浏览器） http://jsfiddle.net/AWMMT/6/

body  white-space: -0.125em; 
body > *  white-space: 0; /* reset to default */ 

【讨论】：

天哪。那东西还在吗？我忘记了这一点，因为我已经有一段时间没有使用 inline-blocks 了。有没有一个名字，所以我可以密切关注是否有人会在某一天在浏览器中“修复”它？现在我记得为什么我通常会漂浮我的船。

它被称为“空白”

@Norris 刚刚添加了一个 CSS 方法来防止此处出现这种间距

它在 gecko 中和在 webkit 中一样适用于我，没有任何问题，并且不会影响您可能想要在 div 之间添加的任何其他非空白字符（如 -）。 （字体大小的优势）

谨防像-2这样的幻数：css-tricks.com/magic-numbers-in-css

【参考方案3】：

实际上有一种非常简单的方法可以从 inline-block 中删除空格，既简单又符合语义。它被称为具有零宽度空格的自定义字体，它允许您使用非常小的字体在字体级别折叠空格（当内联元素位于单独的行时由浏览器添加）。声明字体后，只需更改容器上的字体系列，然后再更改子代，瞧。像这样：

@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 声明：zipped zero-width space font。它位于 Google 云端硬盘中，因此您需要单击文件 > 下载以将其保存到您的计算机。如果将声明复制到主 css 文件中，您可能还需要更改字体路径。

【参考方案4】：

您可以将空格注释掉。

2013 年的原始答案

喜欢：

<span>Text</span><!--

--><span>Text 2</span>

2016 年编辑：

我也喜欢下面的方法，你只需将右括号放在后面的元素之前。

<span>Text</span

><span>Text 2</span>

【参考方案5】：

你也可以这样做（恕我直言，我相信这是正确的）

<div class="div1">...</div>
<div class="div1">...</div>
.
.

.div1
    display:inline-block;

.div1::before, div1::after  white-space-collapse:collapse; 

【讨论】：

您能提供white-space-collapse 的文档吗？我不认为这是一个有效的属性。

@roydukkey 你好！当我回答时，我在这里找到了它link。但它溜走了我的脑海，它仍然是一个草稿。该属性已作为草稿添加到 CSS TextLevel 4：link。

我明白了。这很有趣，但我希望解决方案只是让浏览器不像现在那样运行，不要有这个愚蠢的额外空间。

根据 caniuse 的最新消息，这不是一个有效的属性：This CSS property (formerly known as white-space-collapse or white-space-collapsing) is not supported in any modern browser, nor are there any known plans to support it.caniuse.com/#search=white-space-collapse