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

这太可怕了!


当前回答

您可以将容器的字体大小设置为0,然后空白就会消失!

其他回答

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

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

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

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

我的小东西,小东西,小东西,小东西

所以,用我的迷你东西。(点加空格结束)作为alt文本或推与CSS一起的图像。不要只是删除代码中的空白。

缩小你的HTML!

在将响应呈现给浏览器之前缩小响应是一种很好的实践。

因此,除非您需要空格(并且您使用&nbsp;硬编码),否则您总是在缩小过程中删除空格。

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

代码笔→

(是的,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容器。

试试这个CSS:

img { display: table-cell; }