ansaurus

Question

Answer 1

A:

Minified your HTML!

It is good practice to minified the response before it is rendered to the browser.

So unless you need the space (and you hard coded it using &nbsp), you always remove the spaces in the minification process.

Mendy 2010-04-13 08:33:06

Hm, I was afraid of this. I really hope this isn't going to be another case of some javascript hackery to make HTML actually work

Paul 2010-04-13 08:42:38

that seems especially scary as it requires re-rendering the entire wrapper.

Evan Carroll 2010-08-25 19:05:37

Answer 2

A:

You could make the images floating block-elements instead of inline-elements.

edit: That’s basically what Guffa says too. Why am I wrong and he is right?

David 2010-04-13 08:40:05

That won't yield the same result as putting all images on one line.

Arko 2010-04-13 08:46:15

Yep, you still have to float them.I usually convert all images to block elements and do the layout via CSS.

David 2010-04-13 08:49:54

You see, Guffa told you the same thing.

David 2010-04-13 08:55:02

Answer 3

+1 A:

You can do this with CSS rules.

Not by telling the browser to ignore white-space but rather by writing rules to display your images as you want them to be.

I would start with floating the images left, but i can't say much more without knowing some details about the rest of your page's content and structure... It may be useful to clear the next HTML element from floating.

Try this CSS rule:

img { float: left; }

Full HTML code to check it out:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>HTML/CSS Test page</title>
    <style type="text/css" media="screen">
    img
    {
      float: left;
      width: 2em;
      height: 2em;
    }
    </style>
  </head>
  <body>
    <p>
      <img src="img.png" alt="image" />
      <img src="img.png" alt="image" />
      <img src="img.png" alt="image" />
    </p>
  </body>
</html>

Arko 2010-04-13 08:40:30

May i have some clue about the downvote here? Floating images does indeed remove the white-space in the case described above...

Arko 2010-04-13 08:55:20

Maybe because you're using XHTML and/or it doesn't validate. But OK, the point is clear :) Here's a countervote.

BalusC 2010-04-13 16:08:02

@BalusC: Nice point, :-/ the code is now valid, thx. I added that code after the downvote though...

Arko 2010-04-13 19:43:00

Floating the images left will break most complicated layouts. Sure, it works in this simplified case, kudos, but this is a naive solution.

Jon Grant 2010-04-14 11:54:20

@Jon Grant: I'm afraid i can't at all be with you on this point. A layout may indeed break if you put a float at a random place somewhere without thinking... But if you are the one who is crafting the layout i bet you do know how to do it well. Floats are used all around the web, i don't see much broken layouts out there...

Arko 2010-04-14 12:08:42

I agree fully with Arko, the best way to make CSS layouts extremely brittle is to use float liberally.

Evan Carroll 2010-08-25 19:04:04

Answer 4

A:

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.

toscho 2010-04-13 08:42:47

Where did you get the idea that `image` is some sort of blank, and `alt` is the method of filling it in to make a grammatically and punctually correct sentence, rather than `alt` being a short description of the image?

Evan Carroll 2010-08-25 19:07:21

By listening in [JAWS](http://www.freedomscientific.com/products/fs/jaws-product-page.asp) and browsing without images.

toscho 2010-08-25 22:39:10

Answer 5

A:

It could also be the way your web server serves webpages.

If it is compressing them during transmission, then if your web browser is having to decompress them for you, it will remove all useless characters (ie. whitespace) from the reconstructed/decompressed html file.

Mikepote 2010-04-13 08:45:13

No, compression doesn't remove whitespace.

Guffa 2010-04-13 08:50:13

You're probably confusing compression with minification.

BalusC 2010-04-13 16:06:26

Oh, I would have thought any decent HTML compression scheme would naturally strip out whitespace...

Mikepote 2010-04-15 12:40:31

Answer 6

+12 A:

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.

Guffa 2010-04-13 08:45:28

I don't think the question has anything to do about block/inline elements. I think the asker is wonder why his HTML looks like that when viewing the page source, not how they appear on the page.

Lee Theobald 2010-04-13 08:57:04

I think using CSS to hack around something that can be very easily fixed in the HTML source is overkill and likely to cause you problems in any complex layout. It also doesn't degrade well.

Jon Grant 2010-04-13 08:59:02

@Lee: Sorry, you got it wrong. (See IP's answer to Matts comment to your answer.)

Guffa 2010-04-13 10:52:46

@Jon: It's not about "hacking around" something. The layout should preferrably be controlled by the CSS, so specifying how the images are displayed should actually rather be in the CSS than in the HTML.

Guffa 2010-04-13 10:56:13

It is hacking if you have to float the images (what if they are inline with something else? now you have to float everything. what if there is already something else floated? now you have to break the semantic layout of your page to deal with it) or use relative positioning that relies on the size a space character is rendered.

Jon Grant 2010-04-14 11:57:16

@Jon: What's with you and "hacking"? Floating the images is one way of solving the problem that works in some situations. I have neither said that it's the only solution nor that it is always applicable.

Guffa 2010-04-14 13:11:09

Answer 7

+2 A:

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

Jon Grant 2010-04-13 08:53:10

A full 19 seconds before the same answer by myself. Whether this is aesthetically pleasing enough only the opening poster can decide.

rrrr 2010-04-13 08:54:45

Answer 8

A:

I'm assuming you are just talking about how the HTML looks when you view source and not how they appear on the page.

Your browser shouldn't change how the source is formatted when you view source unless you have a plugin installed to do it. I would say that the compressing down to one line is done by your file editor when you are saving the file. It could be saving line breaks as something that isn't recognised by your browser. What does the HTML look like if you open the page up directly in Notepad or another simple editor?

Lee Theobald 2010-04-13 08:55:47

I don't think the question has anything to do with why his HTML looks like that when viewing the page source. I think the asker is wonder why his images have spaces between them when viewing the page in his browser.

Matt 2010-04-13 09:06:00

Correct, thanks Matt

Paul 2010-04-13 09:55:41

... @Lee so delete the answer.

Evan Carroll 2010-08-25 19:07:54

Answer 9

+5 A:

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

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

Disadvantage, you ask? No browser has implemented this extremely 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>

Boldewyn 2010-04-13 12:27:15

Although I find the commenting way horrifyingly ugly, I use it. Just make it so your IDE displays the comments in a light color so its not "in your face" =P

ItzWarty 2010-04-13 19:41:18

ansaurus

tags:

views:

answers:

Ignore whitespace in HTML

related questions