忽略 HTML 中的空格

Ignore whitespace in HTML

提问by Paul

Is there anything in HTML/CSS that tells the browser to ignore whitespace completely?

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

So many times when you want to put, say, two images next to each other - you try desperately to keep the HTML readable, but the browser puts a space between them.

很多时候，当您想将两个图像并排放置时 - 您拼命地尝试保持 HTML 可读，但浏览器在它们之间放置了一个空格。

So instead of something like this:

所以，而不是这样的事情：

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

you end up with this

你最终得到这个

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

Which is just so horrible!

这太可怕了！

采纳答案by Boldewyn

Oh, you can really easy accomplish that with a single line of CSS:

哦，你可以很容易地用一行 CSS来完成：

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

Disadvantage, you ask? No browser has implemented thisextremely useful feature (think of inline blocks in general) yet. :-(

你问缺点？还没有浏览器实现了这个非常有用的功能（想想一般的内联块）。:-(

What I did from time to time, although it's ugly as the night is dark, is to use comments:

我时不时做的，虽然夜深了难看，但就是用评论：

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

回答by Umesh

you can set the font-sizeof the containerto 0and the white-spacedisappears!

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

回答by Guffa

The browsers does ignore whitespace in most cases when it's next to a block element.

浏览器在大多数情况下会忽略块元素旁边的空格。

The problem with images (in this case) is that they are inline elements, so while you write them on separate lines, they are actually elements on the same line with a space between them (as the line break counts as a space). It would be incorrect for the browser to remove the spaces between the images, writing the image tags with line breaks between them should be handled the same way as writing the image tags on the same line with spaces between them.

图像的问题（在这种情况下）是它们是行内元素，所以当你把它们写在不同的行上时，它们实际上是同一行的元素，它们之间有一个空格（因为换行符算作一个空格）。浏览器删除图像之间的空格是不正确的，在它们之间写入带有换行符的图像标签应该像在同一行上写入图像标签并且它们之间有空格一样处理。

You can use CSS to make the images block elements and float them next to each other, that solves a lot of problems with spacing, both the space between the images and the spacing on the text line below images.

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

回答by Jon Grant

Unfortunately, newlines count as space characters.

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

The best solution I have come up with is to use the whitespace inside the tags themselves, instead of outside:

我想出的最佳解决方案是使用标签本身内部的空白，而不是外部：

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

It's not ideal, either, I know. But at least it's not some bizarre CSS hack that relies on the size a space character is rendered or resorting to relative positioning, or JavaScript :)

这也不理想，我知道。但至少它不是一些奇怪的 CSS hack，它依赖于渲染空格字符的大小或诉诸相对定位或 JavaScript :)

回答by ted451

The newest solution for this is using display: flexon outside container, you can try this with following example:

最新的解决方案是display: flex在外部容器上使用，您可以使用以下示例进行尝试：

Codepen →

代码笔 →

(And yes, Flexbox is becoming widely supported: http://caniuse.com/#search=flexbox)

（是的，Flexbox 正得到广泛支持：http://caniuse.com/#search=flexbox ）

HTML:

HTML：

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

CSS

CSS

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

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

Update:Also, if you want your items to wrap (as standard inline-block elements do), don't forget to add flex-wrap: wrapto your flexbox container.

更新：另外，如果你想让你的项目被包装（就像标准的内联块元素那样），不要忘记添加flex-wrap: wrap到你的 flexbox 容器中。

回答by A2D

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

OK, I might be lucky in that I only have to worry right now about getting this to work in webkit (specifically the one embedded in QT) so it works in Chrome and Safari too. Seems display: table-cellhas all the benefits of display: inline-block, but without the whitespace drawback (think indented td's)

好吧，我可能很幸运，因为我现在只需要担心让它在 webkit（特别是嵌入在 QT 中的那个）中工作，所以它也可以在 Chrome 和 Safari 中工作。似乎display: table-cell具有 display: 的所有优点inline-block，但没有空格的缺点（想想缩进的 td）

回答by Ozzy

What was so difficult about this solution?

这个解决方案有什么困难？

css

css

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

html

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>

回答by fuxia

Images are per default inline elements, that's why you see whitespace between them. If you listen to your example in a screen reader, you immediately know why: without whitespace, you'd hear:

图像是每个默认的内联元素，这就是您看到它们之间有空格的原因。如果您在屏幕阅读器中听您的示例，您会立即知道原因：没有空格，您会听到：

my mini thingmy mini thingmy mini thingmy mini thing

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

So, use my mini thing.(dot plus whitespace at the end) as alt text or push the images with CSS together. Do not just remove the whitespace in the code.

因此，使用my mini thing.（末尾的点加空格）作为替代文本或使用 CSS 将图像推送到一起。不要只是删除代码中的空格。

回答by Chinoto Vokro

If you're using php, this works wonderfully. I found the solution here.

如果您使用的是php，这非常有效。我在这里找到了解决方案。

I was originally looking for something to remove text nodes consisting of only whitespaceafter parsing htmlwith something like simplexml, but this is much cheaper.

我最初正在寻找一些东西来删除仅whitespace在使用simplexml解析html之后才包含的文本节点，但这要便宜得多。

<?ob_start(function($html) {return preg_replace('/>\s+</','><',$html);});?>
    <img src='./mlp.png'/>
    <img src='./dbz.png'/>
    <img src='./b10af.png'/>
    <img src='./fma.png'/>
<?ob_end_flush;?>

回答by yunzen

This is a simple question and the answer is not so simple.

这是一个简单的问题，答案并不那么简单。

One can try to avoid the spaces in the source code which is not always achievable in CMS, because there they are automatically inserted by the system. If you want to change this you have to dig deep inte the CMS's core code.

可以尽量避免源代码中的空格，这在 CMS 中并不总是可以实现，因为它们是由系统自动插入的。如果你想改变这一点，你必须深入挖掘 CMS 的核心代码。

Then you can try to use left floated images. But this is dangerous. At first you don't really have a control over vertical-alignment by definition. And secondly, you run into total chaos if you have so many floated elements, that they stretch over more than one line. And if you have a layout that relies on left floated elements (most of them do so today) you can even break some outer floating styles, if you clear floating after the images. This can be overridden, if you float any surrounding element. Rather not to be recommended.

然后你可以尝试使用左浮动图像。但这是危险的。起初，根据定义，您实际上无法控制垂直对齐。其次，如果您有太多浮动元素，以至于它们延伸到不止一行，您就会陷入混乱。如果你有一个依赖于左浮动元素的布局（今天大多数都是这样）你甚至可以打破一些外部浮动样式，如果你在图像之后清除浮动。如果您浮动任何周围的元素，这可以被覆盖。不如不推荐。

So the only solution would be a CSS declaration that handles the process of whitespace handling. This is not part of any standard (as CSS 3 is not yet finished).

因此，唯一的解决方案是处理空白处理过程的 CSS 声明。这不是任何标准的一部分（因为 CSS 3 尚未完成）。

I prefer the no whitespace in HTML variant. With using drupal as CMS this can be achieved rather easy in your template.php and theming files. Then I choose inline-block.

我更喜欢 HTML 变体中的无空格。使用 drupal 作为 CMS，这可以在您的 template.php 和主题文件中轻松实现。然后我选择内联块。

P.S.: inline-block is rather complicated to get in the different browsers. For FF 2 you need display: -moz-inline-box. The rest and IE8 can have display: inline-block right after. And for lte IE 7 you need display: inline in a following separate declaration (preferrably via conditional comments).

PS：inline-block 在不同的浏览器中是相当复杂的。对于 FF 2，您需要显示：-moz-inline-box。其余的和 IE8 可以有 display: inline-block 紧随其后。对于 lte IE 7，您需要 display: inline 在以下单独的声明中（最好通过条件注释）。

edit

编辑

What I use for making a element inline-block

我用来制作元素内联块的东西

elem.inline {
  display: -moz-inline-box; /* FF2 */ 
  display: inline-block; /* gives hasLayout in IE 6+7*/
}
/* * html hack for IE 6 */
* html elem.inline {
  display: inline; /* elements with hasLayout and display inline behave like inline-block */
}
/* * +  html hack for IE 7 */
* + html elem.inline {
  display: inline; /* elements with hasLayout and display inline behave like inline-block */
}