Automatically adding padding to images when they are floated

I have a CMS that allows the user to add float: right; or float: left; to images they place in their rich text editor. I don't want then to also have to manually insert padding, so I was trying to find a way to include that by default.

I know how to do this with a class, but I'm curious if t开发者_JAVA技巧here's a way to specify either in the CSS or with a bit of jquery that, for instance, when an image has the float: left property, it also gets a padding:0 10px 10px 0 rendering.

Any suggestions would be appreciated.

Thanks

If you're to use CSS, the user either needs to designate a class that has both properties, or else input both properties (float and margin).

You could use jQuery, though and do it dynamically.

$("element").css("float") will return either left or right, if the element is indeed floated. You could put this into an if() statement and apply margin accordingly.

Of course, you'd want to make sure you're only running this logic on appropriate image elements, so as not to mess around with all of the other elements that might be floated on the page.

if ($('img.class').css('float') == 'left'){
    $('img.class').css('padding', 0);
    $('img.class').css('margin','10px 10px 0');
}