#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Posts
    23
    Rep 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?
  2. #2
  3. No Profile Picture
    Texan at Heart
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Castle Rock, CO
    Posts
    316
    Rep Power
    20
    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
  4. #3
  5. Standing 3 feet to the left.
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2006
    Location
    USA
    Posts
    1,435
    Rep Power
    185
    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.
  6. #4
  7. Prisoner of the Sun

    Join Date
    Jul 2004
    Location
    The Mews At Windsor Heights
    Posts
    5,309
    Rep Power
    2351
    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
  8. #5
  9. Standing 3 feet to the left.
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2006
    Location
    USA
    Posts
    1,435
    Rep Power
    185
    If you still want to keep all the images on their own line, you can "comment out" the returns:
    html4strict Code:
    <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.
  10. #6
  11. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2003
    Location
    Oregon
    Posts
    933
    Rep Power
    116
    Cool. Yeah it's a hack but whatever.
    Nothing says CLUELESS NOOB quite as poignantly as $q = "SELECT * FROM users WHERE id = " . $_GET[id];
  12. #7
  13. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,126
    Rep Power
    4304
    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.

    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).
  14. #8
  15. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2003
    Location
    Oregon
    Posts
    933
    Rep Power
    116

    At some geeky level that IS better.


    Indeed. Comments can get icky. Thanks
    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>
    Nothing says CLUELESS NOOB quite as poignantly as $q = "SELECT * FROM users WHERE id = " . $_GET[id];

IMN logo majestic logo threadwatch logo seochat tools logo