diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 451f0140978..7a3dc36b0cb 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -197,6 +197,10 @@
   box-sizing: border-box;
   pointer-events: none;
 }
+.oe_snippet_manipulator .oe_boxsize, .oe_snippet_manipulator .oe_margin {
+  position: absolute;
+  pointer-events: none;
+}
 .oe_snippet_manipulator .oe_handle {
   display: none;
 }
@@ -204,13 +208,13 @@
   opacity: 1;
   cursor: pointer;
 }
-.oe_snippet_manipulator.oe_selected, .oe_snippet_manipulator.oe_active {
+.oe_snippet_manipulator.oe_selected, .oe_snippet_manipulator.oe_active, .oe_snippet_manipulator .oe_boxsize, .oe_snippet_manipulator .oe_margin {
   opacity: 1;
   background: transparent;
   border: dashed 1px rgba(153, 0, 255, 0.5);
   box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
 }
-.oe_snippet_manipulator.oe_selected > *, .oe_snippet_manipulator.oe_active > * {
+.oe_snippet_manipulator.oe_selected .oe_handle, .oe_snippet_manipulator.oe_active .oe_handle, .oe_snippet_manipulator .oe_boxsize .oe_handle, .oe_snippet_manipulator .oe_margin .oe_handle {
   pointer-events: auto;
 }
 .oe_snippet_manipulator .oe_buttons {
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index e982fcc5ac0..ea6bfeeab34 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -177,17 +177,20 @@
     transition: opacity 100ms linear
     box-sizing: border-box
     pointer-events: none
+    .oe_boxsize, .oe_margin
+        position: absolute
+        pointer-events: none
     .oe_handle
         display: none
     &.oe_hover
         opacity: 1
         cursor: pointer
-    &.oe_selected, &.oe_active
+    &.oe_selected, &.oe_active, .oe_boxsize, .oe_margin
         opacity: 1
         background: transparent
         border: dashed 1px rgba(153, 0, 255, 0.5)
         box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.3), 0px 0px 0px 1px rgba(255,255,255,0.3) inset
-        & > *
+        .oe_handle
             pointer-events: auto
     .oe_buttons
         display: none
diff --git a/addons/website/static/src/js/website.snippets.js b/addons/website/static/src/js/website.snippets.js
index 9a16592eaea..689d6d72bf9 100644
--- a/addons/website/static/src/js/website.snippets.js
+++ b/addons/website/static/src/js/website.snippets.js
@@ -482,11 +482,35 @@
 
     website.snippet.editorRegistry.box = website.snippet.Editor.extend({
         onFocus : function () {
-            this._super();
             var self = this;
-            this.$target.data('manipulator')
-                .append($(openerp.qweb.render("website.snippets.box")).find(".oe_handles").html())
-                .addClass('oe_active');
+            var $box = $(openerp.qweb.render("website.snippets.box"));
+
+            $box.find(".oe_snippet_editorbar").prependTo(this.parent.$('#website-top-edit .nav.pull-right'));
+
+            this.$target.data('manipulator').append($box.find(".oe_handles").html()).addClass('oe_active');
+
+            function padding_margin_cover ($manipulator, $snippet) {
+                var height = parseInt($snippet.height() || 0);
+                var width = parseInt($snippet.width() || 0);
+
+                var $padding = $manipulator.find(".oe_boxsize").css({
+                    top: parseInt($snippet.css('padding-top')) + 'px',
+                    bottom: parseInt($snippet.css('padding-bottom')) + 'px',
+                    //height: (height - (parseInt($snippet.css('padding-top')) || 0) - (parseInt($snippet.css('padding-bottom')) || 0)) + 'px',
+                    left: parseInt($snippet.css('padding-left')) + 'px',
+                    right: parseInt($snippet.css('padding-right')) + 'px',
+                    //width: (width - (parseInt($snippet.css('padding-left')) || 0) - (parseInt($snippet.css('padding-right')) || 0)) + 'px',
+                });
+                var $margin = $manipulator.find(".oe_margin").css({
+                    top: -parseInt($snippet.css('margin-top')) + 'px',
+                    bottom: -parseInt($snippet.css('margin-bottom')) + 'px',
+                    //height: (height + (parseInt($snippet.css('margin-top')) || 0) + (parseInt($snippet.css('margin-bottom')) || 0)) + 'px',
+                    left: -parseInt($snippet.css('margin-left')) + 'px',
+                    right: -parseInt($snippet.css('margin-right')) + 'px',
+                    //width: (width + (parseInt($snippet.css('margin-left')) || 0) + (parseInt($snippet.css('margin-right')) || 0)) + 'px',
+                });
+            }
+            padding_margin_cover( this.$target.data('manipulator'),  this.$target);
 
             this.$target.data('manipulator').find(".oe_handle").on('mousedown', function (event){
                     event.preventDefault();
@@ -537,6 +561,7 @@
                             //$snippet.css('width', (size[1]+dx)+'px');
                         }
                         website.snippet.cover_target($manipulator, $snippet);
+                        padding_margin_cover($manipulator, $snippet);
                     };
                     $('body').mousemove(body_mousemove);
 
@@ -549,13 +574,15 @@
                     };
                     $('body').mouseup(body_mouseup);
                 });
+            this._super();
         },
         onBlur : function () {
             this._super();
             this.$target.data('manipulator')
                 .removeClass('oe_active')
                 .empty();
-            },
+            this.parent.$('#website-top-edit .nav.pull-right > .box_resize').remove();
+        },
     });
 
     website.snippet.editorRegistry.carousel = website.snippet.editorRegistry.box.extend({
diff --git a/addons/website/static/src/xml/website.snippets.xml b/addons/website/static/src/xml/website.snippets.xml
index 2e889c3357b..e24b9fdfdf4 100644
--- a/addons/website/static/src/xml/website.snippets.xml
+++ b/addons/website/static/src/xml/website.snippets.xml
@@ -17,13 +17,15 @@
     <div t-name="website.snippets.box" data-snippet-id='box'>
         
         <!-- editor bar to display inside the top edit bar -->
-        <li class='oe_snippet_editorbar'>
-            <i class='icon-move oe_icon js_move'></i>
-            <i class='icon-remove oe_icon js_remove'></i>
+        <li class='oe_snippet_editorbar box_resize'>
+            <a href="#" class="button js_box_move"><i class='icon icon-move'></i></a>
+            <a href="#" class="button js_box_remove"><i class="icon icon-remove"></i></a>
         </li>
 
         <!-- custom data for the widget -->
         <div class='oe_handles'>
+            <div class='oe_boxsize'></div>
+            <div class='oe_margin'></div>
             <div class='oe_handle n'></div>
             <div class='oe_handle ne'></div>
             <div class='oe_handle e'></div>