Remove white space between pictures

Dev Shed Forums Sponsor:

March 3rd, 2007, 09:49 AM

STeeL

Registered User

Join Date: Apr 2003

Posts: 23

Time spent in forums: 3 h 41 m 7 sec
Reputation Power: 0

Remove white space between pictures

My code goes like this:

Code:

<span><img src="image1.jpg"></span>
<span><img src="image2.jpg"></span>
<span><img src="image3.jpg"></span>

If I write this code in one line I'm fine. But when I have them in separate line like above, I end up having white space between them. How do I get rid of them?

March 4th, 2007, 08:02 AM

Corey Bryant

Texan at Heart

Join Date: Sep 2003

Location: Castle Rock, CO

Posts: 316

Time spent in forums: 15 h 6 m 54 sec
Reputation Power: 19

Chances are you might be viewing it in Internet Explorer and seeing white space it added. Plus I am not sure what styles you have applied to the span? You might try

Code:

<span><img src="image1.jpg"></span><span><img src="image2.jpg"></span><span><img src="image3.jpg"></span>

to see if that helps

__________________
Corey
Credit Card Processing | Quantum Gateway
My Merchant Account Blog | Merchant Account Resources

March 5th, 2007, 09:15 AM

Tukaro

Standing 3 feet to the left.

Join Date: Jan 2006

Location: USA

Posts: 1,435

Time spent in forums: 1 Week 5 Days 3 h 49 m 16 sec
Reputation Power: 184

The space is caused because the browser interrepts the tab/return between them to be a space. You might be able to keep it all on separate lines by setting the margin and padding to 0, though I think the space will still be in there.

March 5th, 2007, 10:05 AM

b3n

Prisoner of the Sun

Join Date: Jul 2004

Location: The Mews At Windsor Heights

Posts: 5,309

Time spent in forums: 2 Months 2 Weeks 4 Days 8 h 2 m 23 sec
Reputation Power: 2349

White space DOES matter. Different browsers treat white space differently. It's best to write everything on 1 line if possible, with no needless spaces or newlines. Although it does make your code harder to read - you have to get the balance right. Generally inline elements are more affected by white space.

One example is <a> tags - they should never contain any newlines:
<a href="url.com"><img src="img1.gif" /></a>

__________________
.

:: My blip.fm tunes :: Web Design Feeds :: Web Dev Feeds :: CheatSheets :: PHP :: MySQL :: 13 Moon FB App.

"All matter is merely energy condensed to a slow vibration. We are all one consciousness experiencing itself - subjectively. There is no such thing as death, life is only a dream. We are the imaginations of ourselves."
- Bill Hicks

"Truth is hidden in the subtle nature of the heart of everything, although it is invisible. One cannot see it from inside and neither from the surface. One can only live and experience it."
- Heart Sutra

March 5th, 2007, 11:21 AM

Tukaro

Standing 3 feet to the left.

Join Date: Jan 2006

Location: USA

Posts: 1,435

Time spent in forums: 1 Week 5 Days 3 h 49 m 16 sec
Reputation Power: 184

If you still want to keep all the images on their own line, you can "comment out" the returns:

html4strict Code:

Original - html4strict Code
<span><img src="image1.jpg"></span><!-- --><span><img src="image2.jpg"></span><!-- --><span><img src="image3.jpg"></span>

<span><img src="image1.jpg"></span><!--
--><span><img src="image2.jpg"></span><!--
--><span><img src="image3.jpg"></span>

It's a really nasty way and kind of abuses the comment tag, but I believe that will take care of the spaces between the images while making the document a bit easier to read.

April 23rd, 2008, 01:12 PM

monotreme

Contributing User

Join Date: Mar 2003

Location: Oregon

Posts: 933

Time spent in forums: 6 Days 14 h 47 m 30 sec
Reputation Power: 115

Cool. Yeah it's a hack but whatever.

__________________
Nothing says CLUELESS NOOB quite as poignantly as $q = "SELECT * FROM users WHERE id = " . $_GET[id];

April 23rd, 2008, 01:33 PM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,835

Time spent in forums: 6 Months 1 Day 22 h 11 m
Reputation Power: 4192

I don't like adding extra X/HTML comments. I prefer doing something like this:

Code:

<span><img src="image1.jpg"></span><span
><img src="image2.jpg"></span><span
><img src="image3.jpg"></span>

__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

Remember people spend most of their time on other people's sites (so don't violate web design conventions).

April 23rd, 2008, 01:48 PM

monotreme

Contributing User

Join Date: Mar 2003

Location: Oregon

Posts: 933

Time spent in forums: 6 Days 14 h 47 m 30 sec
Reputation Power: 115

At some geeky level that IS better.

Indeed. Comments can get icky. Thanks

Quote:

Originally Posted by Kravvitz

I don't like adding extra X/HTML comments. I prefer doing something like this:

Code:

<span><img src="image1.jpg"></span><span
><img src="image2.jpg"></span><span
><img src="image3.jpg"></span>

Remove white space between pictures

Developer Shed Advertisers and Affiliates