为什么小空间会继续显示在我的网页上？ [英] Why do small spaces keep showing up in my web pages?

问题描述

这可能是一个愚蠢的问题，但如果有一个更好或正确的方法来做到这一点，我很想学习它。

This might be a stupid question but if there's a better or proper way to do this, I'd love to learn it.

几次，包括最近，小空间显示在我的HTML页面的呈现版本。直观地，我认为这些不应该在那里，因为在文本或实体之外的页面的HTML的格式化不应该，但显然它是。

I have run across this a few times, including recently, where small spaces show up in the rendered version of my HTML page. Intuitively I think these should not be there because outside of text or entities the formatting of a page's HTML shouldn't matter but apparently it does.

我指的是是这 - 我有一些Photoshop文件从客户端如何他们想要他们的网站看起来。他们希望它看起来基本像素完美的图像在这个文件。

What I'm referring to is this - I have some Photoshop file from the client on how they want their site to look. They want it to look basically pixel perfect to the image in this file.

页面中的一个地方需要一个菜单​​栏，其中每一个都在悬停时改变位，像一个超链接等。在Photoshop文件中是一个长条，所以一个便宜和容易的方法来做到这一点是只是将该段分割成多个图像，然后将它们放在文件中的彼此相邻。

One of the places in the page calls for a menu bar, where each one does the changing bit on hovering, acts like a hyperlink, etc. In the Photoshop file this is one long bar, so a cheap and easy way to do this is to just split that segment into multiple images and then place them next to each other in the file.

这样本能地把它布置成这样（有更多的，但这是精神）

So instinctively I lay it out like so (there's more to it but this is the gist)

<a href="page1.html"><img src="image1.png" /></a>
<a href="page2.html"><img src="image2.png" /></a>
<a href="page3.html"><img src="image3.png" /></a>

等。

问题是图像之间有这么小的空间是不可接受的，因为客户端想要这个像素完美的（它只是平淡看起来不错）。

The problem is the images have this tiny space between them which is unacceptable since the client wants this thing pixel-perfect (and it just plain looks bad).

一种使它正确呈现的方法是删除图像之间的回车。

One way to get it to render properly is to remove the carriage returns between the images

<a href="page1.html"><img src="image1.png" /></a><a href="page2.html"><img src="image2.png" /></a><a href="page3.html"><img src="image3.png" /></a>

这使得图像相互向上对齐（期望的效果），但它使线条令人难以置信long和代码更难以维护（它包装在这里SO和这是一个简化的版本 - 真正的一个有更长的文件名和JavaScript洒在做悬停）。

Which makes the images go right up against each other (the desired effect) but it makes the line incredibly long and the code more difficult to maintain (it wraps here in SO and this is a simplified version - the real one has longer filenames and JavaScript sprinkled in to do the hovering).

在我看来，这不应该发生，但它看起来像HTML的回车被渲染为一个小的空白。这是发生在所有浏览器，看起来像。

It seems to me that this shouldn't happen but it looks like the carriage return in the HTML is being rendered as a small empty space. And this happens in all browsers, looks like.

我是对还是错，认为上面的两个片段应该呈现相同？有什么我做错了吗？也许保存文件的编码错误？

Am I right or wrong for thinking the two snippets above should render the same? And is there something I'm doing wrong? Maybe saving the file with the wrong encoding? Should I make every one of these links a perfectly positioned CSS element instead?

推荐答案

空格（包括回车符）通常是渲染的作为所有浏览器中的空间。

The whitespace (carriage return included) is usually rendered as space in all browsers.

您需要逐个放置元素，但您可以使用一个技巧：

You need to put the elements one after another, but you can use a trick:

<a href="page1.html"><img src="image1.png" 
/></a><a href="page2.html"><img src="image2.png" 
/></a><a href="page3.html"><img src="image3.png" 
/></a>

这看起来有点丑陋，但它仍然比一行更好。您可以更改格式，但是想法是在元素内部添加回车符，而不是在它们之间。

This also looks a little ugly, but it's still better than one single line. You might change the formatting, but the idea is to add carriage returns inside the elements and not between them.

这篇关于为什么小空间会继续显示在我的网页上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！