Using hspace/vspace around images

I’d use css to set a border, or even use the HTML border tag. Don’t use archaic methods of setting padding/spacing.

Oki – Thanx!

By studying the CSS for the default theme I’m using, I found that there are img classes called alignleft and alignright with padding and margin settings. By attributing my left aligned image class=??alignleft??, I got the space I wanted.

petit – that is a great idea and thanks for sharing, that is something I will add to my CSS

I tried to set class=alignleft – it works fine.
It doesn’t work if I try to set class=alignright. The text floats around the picture – but still no space between text and picture. I took a look into style.css:

.alignright {
float: right;
}

.alignleft {
float: left
}

img.center, img[align=”right”] {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright, img[align=”right”] {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft, img[align=”left”] {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

Everything seems to be fine. But the class=alignright doesn’t work.

Any ideas how to solve this problem?

Thanks in advance,
Khesrau

I’m not sure about this, but your rules seem to be rather elaborate. I’m using the MODERN theme by Ulf Pettersson ( https://ulfpettersson.se/design/modern/)and his rules are a bit simpler:

/* Begin Images */
p img {
padding: 0;
max-width: 100%;
}

img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright {
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft {
margin: 0 7px 2px 0;
display: inline;
}

.alignright {
float: right;
}

.alignleft {
float: left;
}
/* End Images */

My guess is that the img[align=”right”] and the padding may confuse things. It may also well be that different browsers renders the padding/margin thing a bit differently. It’s a known fact that Firefox and MSIE treats the CSS box model differently.
With the CSS from MODERN it works well in the latest versions of FF and MSIE on a Windows system, which I’m using.

Hi,
I want to add the html attribute hspace=10 to the CSS sheet. I’m too new to html and css…

That’s how it looks like currently:
img.alignright {
float: right;
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft {
float: left;
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

What should I do if I want to have hspace=10 added?
Thanks for your help guys.
Your newbie
J.

For the alignright class you have the margin set as
margin: 0 0 2px 7px;

These are the margin setting for the four sides of the block or image, starting from the top and and going clockwise:
top, right, bottom, left side.

It should work if you change the 7px to 10px.
The same holds for alignleft.

Your style rule states no margin at the top and 2pixels at the bottom. this is because normally the text flow gives you the space you need vertically.

If you want 10 pixels on both to the right and to the left you use
margin: 0 10px 2px 10px;

Be aware that the name of the class is generated by your theme, and if you decide to change theme, you have to correct the theme to generate the correct class name and the stylesheet has to be corrected too.

Hi petit,
thanks for that useful hints. Unfortunately, it looks that the changes are not used. I’m using the “Pool” Theme with WP2.0. I’ve changed all the values to try around, but the pictures are always sticking directly to the text around. No space at all. 7px would have been enough, but it’s not used… Maybe Pool-Theme is not working with WP2.0?
Thank you!

Well, I wouldn’t know. On the site https://www.jbreit.de/blog you use the Fluidity3c theme, but you are obviously talking about some other blog.

Maybe the CSS rules you presented above are overridden by some later rule in the CSS document or even some hard coded rule in the img tag itself?

Hi Petit. Yes there was a problem with the Pool theme CSS rules, I remember. After all trying around, I switched to the fluidity theme and worked several hours on it. I’ve learned a lot while trying around with style sheets etc. I’m only receiving minor error reports with the XHTML validation. But that’s off-topic now. Thanks for your hints, they lead me on the right way! Rgds, J.

Good to hear Jbreit!

Thanks… the fastest answer to a question I’ve ever experienced through a forum search!