• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 195
  • Last Modified:

HTML layout and spacing

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" />

..to 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

ken
0
kenabbott
Asked:
kenabbott
1 Solution
 
basicinstinctCommented:
why don't you do something like this:

  <img
    src="image1.gif"
    width="24"
    height="24"
   /><img
    src="image2.gif"
    width="24"
    height="24" />
0
 
kenabbottAuthor Commented:
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
0
 
sah18Commented:
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.
and
<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:
&nbsp;
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!
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

http://www.csszengarden.com/
0
 
SyntheticsCommented:
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).
0
 
Computer101Commented:
Forced accept.

Computer101
EE Admin
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now