I'm trying to add decorational space after a right-aligned caption. Are there any CSS alternatives to using a non-breaking space entity like below?


CSS padding-right on the P will affect the IMG as well, while generated content doesn't work in IE7.

You could put a <span> around the Caption text and give that a padding-right. That won't affect the image.

Or are you trying to use less mark-up?

Yes, less markup.

What's the benefit of using less markup?

You could restrict the width of the P. In most browsers the image will overflow outside of the p but the text will not.

hence:
p {border: solid; width: 80px; text-align:right;}
p img {width: 100px; display: block;}
will give you a pseudo 20px indent on the right.

Less markup = cleaner, faster.

As the image will spill out that way, that's not a very elegant option, IMO.

I only could achieve a similar effect as your & nbsp; (space added for forum rendering), Christian, with:

But I don't think that's enough space. I'm afraid you'll have to add some tag, which wouldn't hurt semantics, I suppose.

You're right, its a horrible solution!

I'm mostly asking out of curiosity. E.g. a SPAN wouldn't hurt anything and wouldn't be hard to add.

In my browsers the space collapses unless I add "display: inline-block". Then I can also give the block a width if I want:


But alas IE7 doesn't support it (and probably not older versions of the other ones either).

You could add padding-right to the <p> and offset the <img> using a negative margin.

Seems to work! At least in the browsers I have. If you specify a P width you must subtract the padding from it though, which limits you to identical units for both width and padding+margin:



Or you can make the P shrink to fit the IMG's width by e.g. floating it: