hspace and vspace are HTML, and won't do anything in a CSS stylesheet, if that is what you are trying to do.

Probably something like: img {margin: x y}

See [webmasterworld.com...]

[edited by: Wlauzon at 5:17 pm (utc) on June 3, 2008]

The problem is no matter what I set my margin to for img's, it always voids any hspaces/vspaces in firefox (although not in IE).

So I could certainly set say

* img {margin-left:5px;margin-right:5px }

to emulate a hspace value, but the problem is this style would set that margin for each and every img for every page on my website. I want to be able to control the hspace for each separate tag using the hspace attribute and this works fine in firefox if I get rid of

* {
margin: 0;
padding: 0;
}

However I can't do that because other parts of my template are depending on this.

What I need is for everything to have 0 margin and 0 padding except for img's.

Is this possible?

Why don't you just set the image margins with CSS?

Basically some browsers override the hspace with CSS, some do not. hspace and vspace are deprecated for HTML 4+.

[edited by: Wlauzon at 8:58 pm (utc) on June 3, 2008]

If I set any margin to the img tag, I can no longer use hspace (I really want to use hspace because I'm porting over a ton of content from a old website that is filled with hspace instances).

I could create a class for each image that has a different hspace, but this would be awkward because there are so many images and I would have to set the class to each and every image.

The preferable solution would be to fix something in the master stylesheet but I'm not sure how to do this. If I get rid of * {margin:0px;} this will cause my template to look all funky.

If you're adamant about letting hspace and vspace do its thing, you're going to have to remove the universal selector reset.

You'll have to do a more complicated reset, e.g.:

html, 
body, 
div, 
p, 
h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
address, 
blockquote, 
ul, 
ol, 
dl { margin: 0;
padding: 0; }

... that sort of thing. I think Eric Meyer has a pretty... advanced reset.css, which you could just remove the instances of

img

I was afraid I would have to do something like that :(

Well it did do the trick. If anybody has a similar problem (especially with drupal templates) just replace

* {
margin: 0;
padding: 0;
}

with:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin:0px;
padding:0px;
}

Thanks for the tip Setek about reset.css which looks pretty nifty for future reference: [meyerweb.com...]