忽略HTML中的空白

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

这太可怕了!

当前回答

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

我的小东西，小东西，小东西，小东西

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

2010-04-13 08:42:47

其他回答

我的小东西，小东西，小东西，小东西

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

2010-04-13 08:42:47

哦，你可以很容易地完成这一行CSS:

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

你会问，缺点?目前还没有浏览器实现这个非常有用的特性(一般来说是内联块)。: - (

我时常做的事是，尽管它像黑夜一样丑陋，就是使用评论:

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

2010-04-13 12:27:15

这个解决方案有什么困难之处?

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>

2012-07-09 12:50:25

缩小你的HTML!

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

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

2010-04-13 08:33:06

试试这个CSS:

img { display: table-cell; }

2015-01-14 15:48:30

忽略HTML中的空白

推荐文章

最新文章

标签