I cannot get jQuery to update a DIV object's "margin-Right" property. Any ideas?

.fooBar {
        float: left;
        display:inline-block;
        height: 600px;
        margin-right: 0px;
}

$('.fooBar').click(functio开发者_Python百科n(){
    $(this).css('margin-right', '20px');        
});

I have a bunch of div objects which are floating and horizontally laid out. I have a button that is supposed to space them out further in real-time. You can see the line of jQuery I'm using.

However, it doesn't seem to work... at all. Any ideas on how to dynamically change a div's margin-right property?

EDIT: Here is the markup:

<div class="fooBar" style="width: 200px;" ><image src="../work/test1.jpg"></div>
<div class="fooBar" style="width: 210px;" ><image src="../work/test2.jpg"></div>
<div class="fooBar" style="width: 450px;" ><image src="../work/test3.jpg"></div>
<div class="fooBar" style="width: 610px;" ><image src="../work/test4.jpg"></div>

EDIT #2: Removing the extraneous 'inline-block' seems to have fixed the issue. Thanks all!

The display and float styles are mutually exclusive (as far as I know) so you could start fixing it.

I have a feeling it's because of the hyphen. I think there are some pseudo-alias "magic strings" like marginRight which might work, try that instead. I have seen before and used backgroundColor when accessing with jQuery/JavaScript, whereas the CSS equivalent should be background-color.

Float and margin will not work properly on elements that do not have width assigned.

Give .fooBar a width and it should work.

Also, remove the display:inline-block;

Here is a working example: http://jsfiddle.net/jasongennaro/2fkx7/

NOTE: I used margin-left, as you wouldn't see a change to margin-right in the example... because there is nothing to the right of the element.