SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru mdumka's Avatar
    Join Date
    Jul 2003
    Location
    True North
    Posts
    642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Space beween my images ...

    Hello ...

    I have 2 images I want side by side but I am getting some white space in between them.

    Code:
    <div class="myClass">
    	<img src="images/one.jpg" />
    	<img src="images/two.jpg" />
    </div>
    But this works ...

    Code:
    <div class="myClass">
    	<img src="images/one.jpg" /><img src="images/two.jpg" />
    </div>
    Why?

  2. #2
    SitePoint Zealot rufman's Avatar
    Join Date
    Mar 2009
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    code looks right to me.
    BE YOUR OWN CONFUCIUS!
    fortune cookies
    fortune cookie

  3. #3
    SitePoint Evangelist
    Join Date
    Apr 2009
    Location
    South Carolina
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is the styling you are using for those two images?

    Margin-left:0px; margin-right:0px;

    You may also need to adjust the padding to eliminate the space between the images.

  4. #4
    SitePoint Member
    Join Date
    Dec 2007
    Location
    Zurich, Switzerland
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    try converting the images to block elements:

    img { display:block}

    or

    <img style="display: block" ...

    This is only useful, if you have the images on top of one another and not next to each other.

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your first code block includes a line feed and/or carriage return character between the two IMG elements. In HTML, line feeds and carriage returns are considered white space. In other words, they are treated the same as a normal "space" character. The easiest way to remove the space between the two IMGs is to remove the line feed/carriage return (as you've done in your second code block).

    Although we advocate the separation of presentation from markup, there are still many instances of markup affecting presentation. This is a clear example of that. Of course you could find a CSS technique to remove the space, but making a minor change to your markup is probably much easier.

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Images generate inline boxes by default. Inline boxes are laid out horizontally along with other inline boxes – including those generated by text (and the white-space characters between your image elements are text).

    To remove the space you can either get rid of the white-space characters or you can float the images with CSS. That has some side-effects that may be undesirable, though.
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Guru mdumka's Avatar
    Join Date
    Jul 2003
    Location
    True North
    Posts
    642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Guys, Thanks for all of the feed back.

    What I was going for was a top navigation like images that had hyperlinks around every image for a horizontal display.

    So lining up the images and links in one line of code would work, but the code would be brutal and hard to maintain.

    So I started using display:block and float:left to get them to line up and everything worked out well.

    Again ... thanks for the help to a very silly problem.

    Mike

  8. #8
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is a poor practice, without compelling reason otherwise, to jigger the markup to support presentation. For this code,
    Code:
    <div class="myClass">
    	<img src="images/one.jpg" />
    	<img src="images/two.jpg" />
    </div>
    set a negative word-spacing, e.g.
    Code:
    .myClass {
      word-spacing: -.5em;
      }
    The value will range from -.3em to -.5em. Most (all?) UAs won't allow words to overlap, so too large a value will generally be ok.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    What I was going for was a top navigation like images that had hyperlinks around every image for a horizontal display.
    I wouldn't recommend building a menu out of images any more than building a house out of spoons. Are these background images? That might be one way to do it. At the very least, use a menu setup in your HTML.

    So lining up the images and links in one line of code would work, but the code would be brutal and hard to maintain.
    When I use display: inline-block (which has the same problem) I make my markup look goofy.
    <ul>
    <li><a href="blah">Blah</a><li
    ><li><a href="blah">Blah</a><li
    ><li><a href="blah">Blah</a><li
    ></ul>

    though Gary's idea is nicer, wish I'd thought of it.
    So I started using display:block and float:left to get them to line up and everything worked out well.
    Actually, the float alone will do... because floats are blocks, so you don't even need to say display: block; : )


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •