HTML layout and spacing

Posted on 2007-10-08
Last Modified: 2010-04-09
I want to put 2 images onto a page with no space between them and thus I'm using the following:

<img src="image1.gif" width="24" height="24" /><img src="image2.gif" width="24" height="24" />

However if I change this to....

<img src="image1.gif" width="24" height="24" />
<img src="image2.gif" width="24" height="24" /> make it easier to read then a space is put between image 1 and image 2.  Is there any way of avoiding this??

Many thanks

Question by:kenabbott
    LVL 23

    Accepted Solution

    why don't you do something like this:

        height="24" />

    Author Comment

    Many thanks

    So will it always be the case that if there is any white space between closing one tag and opening another then this will displayed as a space in the output
    LVL 9

    Expert Comment

    To answer the "whitespace" portion of your question:  HTML pays attention to only a single space of whitespace, unless a code is used.
    For example
    <img src="image1.gif" width="24" height="24" /> <img src="image2.gif" width="24" height="24" />
    will show a single blank space between the images.
    <img src="image1.gif" width="24" height="24" />        <img src="image2.gif" width="24" height="24" />
    will ALSO show only a single blank space between the images.
    If there are one or more spaces (from pressing the space bar), it will always only pay attention to a single space (and that's what it will show in the browser).

    If you actually did want spaces (which you don't), you could use a code:
    Which stands for non-breaking space.  Each time you repeat this code, it adds in another space in what is visible in the browser.

    In your code, it may be that you actually did hit the space bar right after the first image tag -- a return is fine (the browser will ignore this), but you don't want to hit the space bar, since it will put in a single space then.

    Let me know if you have more questions on this!
    LVL 4

    Expert Comment

    Technically HTML should only contain markup, the style (ie visual appearance) should be set via CSS

    You could try positioning the images - maybe like this:

    <img style="float:left" src="image1.gif" width="24" height="24" />
    <img style="float:left" src="image2.gif" width="24" height="24" />

    The included style element floats the images towards the left of the page. this may or may not work - it depends on the rest of the page layout as it position the images to the left of any other element.

    You could also try using other style elements such as "position:relative" "position:absolute"

    Technically inline style such as the example above is not good practice it is better to separate the style into a CSS file.

    Separating the style from the mark-up is a good habit to get into.

    Try this link for some inspiration
    LVL 5

    Expert Comment

    another alternative inline style:

    <img style="margin-left:0" src="image1.gif" width="24" height="24"/>
    <img style="margin-right:0" src="image2.gif" width="24" height="24"/>

    As mentioned before, all styling should really be done in an external stylesheet (normally CSS, although there are alternatives).
    LVL 1

    Expert Comment

    Forced accept.

    EE Admin

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now