忽略HTML中的空格

HTML/CSS中是否有任何东西告诉浏览器完全忽略空格？

很多时候,当你想把两个图像放在一起时 - 你会拼命地保持HTML的可读性,但浏览器会在它们之间留一个空格.

所以不是这样的:

你最终得到了这个

哪个太可怕了!

1> Boldewyn..：

---

哦,你可以通过一行CSS轻松实现这一目标:

#parent_of_imgs { white-space-collapse: discard; }

缺点,你问？没有浏览器实现过这个非常有用的功能(一般都考虑内联块).:-(

我不时做的,虽然夜晚是黑暗的丑陋,但是要使用评论:

---

CSS将是"文本空间崩溃:trim-inner",具有最新的规范变化

---

它已经转移到4级,http://dev.w3.org/csswg/css4-text/#white-space-collapsing,这意味着我们的未来:-(

---

显然,该物业已经重新命名; 截至目前,该页面上写着"重大变化...... 2011年2月......将'白色空间崩溃'改名为'自行车''."

---

后来css工作组会议纪要称这将是文本空间崩溃.

---

虽然我发现评论方式可怕的丑陋,但我使用它.只需这样就可以让你的IDE以浅色显示评论,这样它就不会"在你脸上"= P.

---

在父容器上设置`white-space:nowrap;`最近为我工作.

2> 小智..：

---

您可以设置font-size的的容器来0和white-space消失!

---

+1.这是一个可怕的黑客,但它的工作原理,似乎是没有支持"白色空间崩溃"风格的最佳解决方案.(但请注意:如果子元素中有文本,您还需要再次为其设置字体大小,否则所有内容都将消失)

---

您也失去了使用百分比字体大小的能力,因为它们被计算为父容器的百分比(将为0)

---

有趣的是,这适用于Chrome,但不适用于Safari(经过测试的Chrome 22,Safari 5.1.7).如果指定高度为1px,它可以在Safari中使用.

3> Guffa..：

---

当浏览器位于块元素旁边时,浏览器会在大多数情况下忽略空格.

图像(在这种情况下)的问题在于它们是内联元素,因此当您在单独的行上编写它们时,它们实际上是同一行上的元素,它们之间有空格(因为换行符计为空格).浏览器删除图像之间的空格是不正确的,在它们之间用换行符写入图像标记应该像在同一行上写入图像标记一样处理它们之间的空格.

您可以使用CSS来使图像块元素并将它们彼此相邻地浮动,这解决了间距的许多问题,图像之间的空间和图像下方文本行的间距.

---

@Jon:这不是关于"黑客攻击"的东西.布局应该优选地由CSS控制,因此指定图像的显示方式实际上应该在CSS中而不是在HTML中.

---

@Lee:对不起,你弄错了.(参见IP对Matts的回答评论你的答案.)

---

如果你必须浮动图像(如果它们与其他东西内联,那么它是什么呢？现在你必须浮动一切.如果已经有其他东西漂浮了怎么办？现在你必须打破页面的语义布局来处理it)或使用依赖于渲染空格字符大小的相对定位.

4> Jon Grant..：

---

不幸的是,换行符算作空格字符.

我想出的最好的解决方案是使用标签内部的空白而不是外部:

我知道,这也不理想.但至少它不是一些奇怪的CSS黑客依赖于渲染空间角色的大小或诉诸相对定位,或JavaScript :)

5> ted451..：

---

最新的解决方案是display: flex在外部容器上使用,您可以通过以下示例尝试:

Codepen→

(是的,Flexbox正在得到广泛支持:http://caniuse.com/#search=flexbox )

HTML:

CSS

.box {
  display: flex;
  display: -webkit-flex;    
}

span {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #fcf;
  border: 2px solid #f9f;
}

更新:此外,如果您希望您的项目换行(作为标准的内联块元素),请不要忘记添加flex-wrap: wrap到您的Flexbox容器.

---

Flexbox FTW-见[这里](http://www.sitepoint.com/are-we-ready-to-use-flexbox/),[这里](https://developer.mozilla.org/en-US/ docs/Web/Guide/CSS/Flexible_boxes),[here](http://css-tricks.com/snippets/css/a-guide-to-flexbox/)和[here](http:// the- echoplex.net/flexyboxes)

6> A2D..：

---

...

好吧,我可能很幸运,因为我现在只需要担心在webkit中使用它(特别是嵌入在QT中的那个),所以它也适用于Chrome和Safari.看起来display: table-cell有显示的所有好处:inline-block,但没有空白的缺点(想想缩进的td)

---

使用`table-cell`无法处理的`inline-block`可以做一件事:通过在父对象上设置`text-align`将所有元素对齐到右边或中心.

7> Ozzy..：

---

这个解决方案有多难？

CSS

.no-whitespace {
    line-height: 0;
    font-size: 0;
}

HTML

---

不好.那些属性是继承的......

---

虽然这有可能"取消"嵌套字体大小,但这是我最喜欢的解决方案.

8> fuxia..：

---

图像是默认的内联元素,这就是为什么你看到它们之间的空白.如果你在屏幕阅读器中听你的例子,你会立即知道原因:没有空格,你会听到:

我迷你的东西迷你的东西迷你的东西迷你的东西

因此,使用my mini thing.(最后点加空格)作为替代文本或将图像与CSS一起推送.不要只删除代码中的空格.