Jquery UI - margin issue with jquery resizable

Question

Please check my code below. I am using JQuery UI for Resizable. I have margin on an image and then I am applying JQuery resizable on image click and i am removing it when I click outside the image. Everything is working fine but except this behavior is removing the margin from image. Is there any way to keep the margin?

HTML

<img src="http://4.bp.blogspot.com/-DQ69szlhi38/UCJwZqNfcJI/AAAAAAAAAcY/6gsenl0Mwr8/s72-c/google.jpg" style="margin:20px;"/>

JQuery

$('document').ready(function(){
    $('img').click(function(){
        $(this).resizable();
    });
});
$(document).mouseup(function (e) {
    var container = $('img');
    if ((!container.is(e.target)
        && container.has(e.target).length === 0)) {
        if ($('img').hasClass('ui-resizable')) {
            $('img').resizable('destroy');  
        }
    }
});

Please check the code in jsfiddle http://jsfiddle.net/wgdvza8j/3/

Answer 1

I figured out the issue. I am now pulling the margin from ui-wrapper and then applying on the image. Please check my code on js fiddle http://jsfiddle.net/wgdvza8j/6/

HTML

JQuery

$('document').ready(function(){
    var imgMarginTop,imgMarginRight,imgMarginBottom,imgMarginLeft;
    $('img').click(function(){
        $(this).resizable();
    });
});
$(document).mouseup(function (e) {
    var container = $('img');
    if ((!container.is(e.target)
        && container.has(e.target).length === 0)) {
        if ($('img').hasClass('ui-resizable')) {
            imgMarginTop = $('.ui-wrapper').css('marginTop');
            imgMarginRight = $('.ui-wrapper').css('marginRight');
            imgMarginBottom = $('.ui-wrapper').css('marginBottom');
            imgMarginLeft = $('.ui-wrapper').css('marginLeft');
            $('img').css({'marginTop':imgMarginTop,'marginRight':imgMarginRight,'marginBottom':imgMarginBottom,'marginLeft':imgMarginLeft});
            $('img').resizable('destroy');  
        }    
    }
});

Answer 2

jQuery UI resizible sets inline CSS styles for your image including margin: 0. It means that in order to overload this margin you have to set CSS rules like this (!important is the way to make rule more specific then inline styles):

img {
    margin: 20px !important;
}

However I'm not sure why would you need this margin at all.

Demo: http://jsfiddle.net/wgdvza8j/4/