忽略HTML中的空格

Question

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

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

所以不是这样的:

<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />

你最终得到了这个

<img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" />

哪个太可怕了!

Answer 1

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

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

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

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

<p><!--
  --><img src="." alt="" /><!--
  --><img src="." alt="" /><!--
  --><img src="." alt="" /><!--
  --><img src="." alt="" /><!--
--></p>

Answer 2

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

Answer 3

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

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

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

Answer 4

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

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

  <img src="images/minithing.jpg" alt="my mini thing" 
/><img src="images/minithing.jpg" alt="my mini thing"
/><img src="images/minithing.jpg" alt="my mini thing"
/><img src="images/minithing.jpg" alt="my mini thing" />

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

Answer 5

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

Codepen→

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

HTML:

<!-- Disregard spaces between inline-block elements? -->
<div class="box">
  <span></span>
  <span></span>
  <span></span>
</div>

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容器.

Answer 6

<style>
  img {
     display: table-cell
  }
</style>
<img src="images/minithing.jpg" alt="my mini thing" />...

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

Answer 7

这个解决方案有多难？

CSS

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

HTML

<span class="no-whitespace">

    <a href=# title='image 1'>
       <img src='/img/img1.jpg' alt='img1'/>
    </a>

    <a href=# title='image 2'>
       <img src='/img/img2.jpg' alt='img2'/>
    </a>

    <a href=# title='image 3'>
       <img src='/img/img3.jpg' alt='img3'/>
    </a>

</span>

Answer 8

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

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

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