diff --git a/addons/web_editor/static/src/css/web_editor.css b/addons/web_editor/static/src/css/web_editor.css
index 09a55ac9846..f83b5628b4e 100644
--- a/addons/web_editor/static/src/css/web_editor.css
+++ b/addons/web_editor/static/src/css/web_editor.css
@@ -25,103 +25,6 @@
   min-width: 20px;
 }
 
-/* Vertical Spacing */
-.mt128 {
-  margin-top: 128px !important;
-}
-
-.mt92 {
-  margin-top: 92px !important;
-}
-
-.mt64 {
-  margin-top: 64px !important;
-}
-
-.mt48 {
-  margin-top: 48px !important;
-}
-
-.mt32 {
-  margin-top: 32px !important;
-}
-
-.mt16 {
-  margin-top: 16px !important;
-}
-
-.mt8 {
-  margin-top: 8px !important;
-}
-
-.mt4 {
-  margin-top: 4px !important;
-}
-
-.mt0 {
-  margin-top: 0px !important;
-}
-
-.mb128 {
-  margin-bottom: 128px !important;
-}
-
-.mb92 {
-  margin-bottom: 92px !important;
-}
-
-.mb64 {
-  margin-bottom: 64px !important;
-}
-
-.mb48 {
-  margin-bottom: 48px !important;
-}
-
-.mb32 {
-  margin-bottom: 32px !important;
-}
-
-.mb16 {
-  margin-bottom: 16px !important;
-}
-
-.mb8 {
-  margin-bottom: 8px !important;
-}
-
-.mb4 {
-  margin-bottom: 4px !important;
-}
-
-.mb0 {
-  margin-bottom: 0px !important;
-}
-
-.ml8 {
-  margin-left: 8px !important;
-}
-
-.ml4 {
-  margin-left: 4px !important;
-}
-
-.ml0 {
-  margin-left: 0px !important;
-}
-
-.mr8 {
-  margin-right: 8px !important;
-}
-
-.mr4 {
-  margin-right: 4px !important;
-}
-
-.mr0 {
-  margin-right: 0px !important;
-}
-
 /* Media */
 img.shadow {
   -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
diff --git a/addons/web_editor/static/src/css/web_editor.sass b/addons/web_editor/static/src/css/web_editor.sass
index c9ea7876c16..2b5b4a8ee2f 100644
--- a/addons/web_editor/static/src/css/web_editor.sass
+++ b/addons/web_editor/static/src/css/web_editor.sass
@@ -27,61 +27,6 @@
         td
             min-width: 20px
 
-
-/* Vertical Spacing */
-
-.mt128
-    margin-top: 128px !important
-.mt92
-    margin-top: 92px !important
-.mt64
-    margin-top: 64px !important
-.mt48
-    margin-top: 48px !important
-.mt32
-    margin-top: 32px !important
-.mt16
-    margin-top: 16px !important
-.mt8
-    margin-top: 8px !important
-.mt4
-    margin-top: 4px !important
-.mt0
-    margin-top: 0px !important
-
-.mb128
-    margin-bottom: 128px !important
-.mb92
-    margin-bottom: 92px !important
-.mb64
-    margin-bottom: 64px !important
-.mb48
-    margin-bottom: 48px !important
-.mb32
-    margin-bottom: 32px !important
-.mb16
-    margin-bottom: 16px !important
-.mb8
-    margin-bottom: 8px !important
-.mb4
-    margin-bottom: 4px !important
-.mb0
-    margin-bottom: 0px !important
-
-.ml8
-    margin-left: 8px !important
-.ml4
-    margin-left: 4px !important
-.ml0
-    margin-left: 0px !important
-
-.mr8
-    margin-right: 8px !important
-.mr4
-    margin-right: 4px !important
-.mr0
-    margin-right: 0px !important
-
 /* Media */
 
 img.shadow
diff --git a/addons/web_editor/static/src/less/web_editor.less b/addons/web_editor/static/src/less/web_editor.less
new file mode 100644
index 00000000000..8cc69271afa
--- /dev/null
+++ b/addons/web_editor/static/src/less/web_editor.less
@@ -0,0 +1,63 @@
+// Generate all margins for all sizes
+.o-margins-all(@factor: 1) {
+    // Unfortunately, the margins sizes are not
+    // mathematically related by a single function
+    .o-margins(128, @factor);
+    .o-margins(96, @factor);
+    .o-margins(92, @factor);
+    .o-margins(64, @factor);
+    .o-margins(48, @factor);
+    .o-margins(32, @factor);
+    .o-margins(24, @factor);
+    .o-margins(16, @factor);
+    .o-margins(8, @factor);
+    .o-margins(4, @factor);
+    .o-margins(0, @factor);
+}
+
+// Generate all margins for one size, scalled by a
+// given factor (0 <= factor <= 1)
+.o-margins(@name, @factor: 1) {
+    .o-margins-define(@name, @factor * @name);
+}
+
+// Generate all margins for one size, given
+// the name of the margin and intended size
+.o-margins-define(@name, @size: @name) {
+    .mt@{name} {margin-top: ~"@{size}px";}
+    .mb@{name} {margin-bottom: ~"@{size}px";}
+    .ml@{name} {margin-left: ~"@{size}px";}
+    .mr@{name} {margin-right: ~"@{size}px";}
+}
+
+// Generate all margins
+.o-margins-all();
+
+// It is possible to change the margins ratio for
+// small screen sizes using media queries, e.g.:
+// @media (max-width: 768px) {
+//     .o-margins-all(0.75);
+// }
+
+// It is also possible to only redefine single margins
+// for small screen sizes using media queries, e.g.:
+// @media (max-width: 768px) {
+//     .o-margins(64, 0.50);
+//     .o-margins(48, 0.50);
+// }
+
+// It is also possible to directly redefine the size
+// of single margins instead of refering to a factor
+// for small screen sizes using media queries, e.g.:
+// @media (max-width: 768px) {
+//     .o-margins-define(128, 48);
+//     .o-margins-define(96, 48);
+//     .o-margins-define(64, 48);
+// }
+
+a.o_underline {
+    text-decoration: underline;
+    &:hover {
+        text-decoration: underline;
+    }
+}
\ No newline at end of file
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
index ee996548379..ccced98af2c 100644
--- a/addons/web_editor/static/src/xml/snippets.xml
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -33,9 +33,9 @@
                         <a href="#" data-toggle="dropdown" class="btn btn-primary btn-sm" title="Customize">Customize <span class="caret"/></a>
                         <ul class="dropdown-menu" role="menu"></ul>
                     </div>
-                    <a href="#" class="btn btn-default btn-sm oe_snippet_move" title="Drag to Move">&amp;nbsp;<i class="fa fa-arrows"></i>&amp;nbsp;</a>
-                    <a href="#" class="btn btn-default btn-sm oe_snippet_clone" title="Duplicate Container">&amp;nbsp;<i class="fa fa-files-o"></i>&amp;nbsp; </a>
-                    <a href="#" class="btn btn-default btn-sm oe_snippet_remove" title="Remove Block">&amp;nbsp;<i class="fa fa-trash-o"></i>&amp;nbsp; </a>
+                    <a href="#" class="btn btn-default btn-sm oe_snippet_move" title="Drag to Move"><i class="fa fa-arrows ml4 mr4"></i></a>
+                    <a href="#" class="btn btn-default btn-sm oe_snippet_clone" title="Duplicate Container"><i class="fa fa-files-o ml4 mr4"></i></a>
+                    <a href="#" class="btn btn-default btn-sm oe_snippet_remove" title="Remove Block"><i class="fa fa-trash-o ml4 mr4"></i></a>
                 </div>
             </div>
             <div class='oe_handles'>
diff --git a/addons/web_editor/views/editor.xml b/addons/web_editor/views/editor.xml
index 5053d5acd6b..fb89f1fec3c 100644
--- a/addons/web_editor/views/editor.xml
+++ b/addons/web_editor/views/editor.xml
@@ -113,6 +113,7 @@
 <template id="assets_common" inherit_id="web.assets_common" name="web_editor base assets_common">
     <xpath expr="." position="inside">
         <link rel="stylesheet" href='/web_editor/static/src/css/web_editor.css'/>
+        <link rel="stylesheet" href='/web_editor/static/src/less/web_editor.less'/>
         <script type="text/javascript" src="/web_editor/static/src/js/base.js" />
         <script type="text/javascript" src="/web_editor/static/src/js/snippets.animation.js" />
     </xpath>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index e0f1e0899ec..54be37490f3 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -49,6 +49,7 @@
     <script type="text/javascript" src="/website/static/src/js/web_planner_website.js"></script>
     <script type="text/javascript" src="/website/static/src/js/website.contentMenu.js"></script>
     <link rel='stylesheet' href='/web_editor/static/src/css/web_editor.css'/>
+    <link rel='stylesheet' href='/web_editor/static/src/less/web_editor.less'/>
     <link rel="stylesheet" href="/website/static/src/css/website.editor.css"/>
     <script type="text/javascript" src="/website/static/src/js/website.snippets.editor.js"></script>
     <script type="text/javascript" src="/website/static/src/js/website.snippets.gallery.js"></script>
diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml
index 2d6d97a6564..20e60fd8f19 100644
--- a/addons/website_blog/views/website_blog_templates.xml
+++ b/addons/website_blog/views/website_blog_templates.xml
@@ -61,16 +61,15 @@
                         <h4>
                             <a t-attf-href="#{blog_url('', ['blog', 'post'], blog=post.blog_id, post=post)}" t-field="post.name"></a>
                             <span t-if="not post.website_published" class="text-warning">
-                                &amp;nbsp;
-                                <span class="fa fa-exclamation-triangle" title="Not published"/>
+                                <span class="fa fa-exclamation-triangle ml8" title="Not published"/>
                             </span>
                         </h4>
                         <div class="text-muted">
-                            <span class="fa fa-calendar"> <span t-field="post.create_date"/> &amp;nbsp;</span>
+                            <span class="fa fa-calendar mr8"> <span t-field="post.create_date"/></span>
                             <span class="fa fa-folder-open"> In
-                                <a t-attf-href="#{blog_url(blog=post.blog_id)}">
+                                <a class="mr8" t-attf-href="#{blog_url(blog=post.blog_id)}">
                                 <span t-field="post.blog_id"/>
-                                </a> &amp;nbsp;
+                                </a>
                             </span>
                         </div>
                         <div class="text-muted fa fa-tags">
@@ -177,7 +176,7 @@
         <p class="post-meta text-muted text-center" t-if="len(blog_post.tag_ids)">
             <span class="fa fa-tags"/>
             <t t-foreach="blog_post.tag_ids" t-as="one_tag">
-                <a t-attf-href="#{blog_url(tag=one_tag.id, date_begin=False, date_end=False)}" t-esc="one_tag.name"/> &amp;nbsp;
+                <a class="mr8" t-attf-href="#{blog_url(tag=one_tag.id, date_begin=False, date_end=False)}" t-esc="one_tag.name"/>
             </t>
         </p>
     </xpath>
@@ -336,7 +335,7 @@
         <p class="post-meta text-muted text-center" t-if="len(blog_post.tag_ids)">
             <span class="fa fa-tags"/>
             <t t-foreach="blog_post.tag_ids" t-as="one_tag">
-                <a t-attf-href="#{blog_url(tag=one_tag.id)}" t-esc="one_tag.name"/> &amp;nbsp;
+                <a class="mr8" t-attf-href="#{blog_url(tag=one_tag.id)}" t-esc="one_tag.name"/>
             </t>
         </p>
     </xpath>
diff --git a/addons/website_customer/views/website_customer.xml b/addons/website_customer/views/website_customer.xml
index c7d3591f815..680b82c4a18 100644
--- a/addons/website_customer/views/website_customer.xml
+++ b/addons/website_customer/views/website_customer.xml
@@ -115,8 +115,8 @@
 
         <h3 t-if="len(tags)">References by Tag</h3>
         <ul class="nav nav-pills nav-stacked mt16 mb32" t-if="len(tags)">
-            <a t-attf-class="" t-attf-href="/customers/#{ current_country and 'country/%s' % slug(current_country) or '' }#{ search_path }">
-                <span class="fa fa-1x fa-tags"/> All </a>&amp;nbsp;
+            <a class="mr8" t-attf-href="/customers/#{ current_country and 'country/%s' % slug(current_country) or '' }#{ search_path }">
+                <span class="fa fa-1x fa-tags"/> All </a>
             <t t-foreach="tags" t-as="o_tag">
                 <a t-attf-class="label label-#{o_tag.classname}" t-esc="o_tag.name" t-att-style="tag and tag.id==o_tag.id and 'text-decoration: underline'"
                     t-attf-href="/customers/#{ 'tag/%s/' % slug(o_tag) }#{ current_country and 'country/%s' % slug(current_country)  or '' }#{ search_path }"/>
diff --git a/addons/website_event_sale/views/website_event_sale.xml b/addons/website_event_sale/views/website_event_sale.xml
index 2f08bebdd29..eb0a2a85889 100644
--- a/addons/website_event_sale/views/website_event_sale.xml
+++ b/addons/website_event_sale/views/website_event_sale.xml
@@ -39,11 +39,11 @@
                     <td>
                             <t t-if="ticket.price or editable">
                               <t t-if="(ticket.price-ticket.price_reduce) &gt; 1">
-                                <del class="text-danger" style="white-space: nowrap;" t-field="ticket.price" t-field-options='{
+                                <del class="text-danger mr4" style="white-space: nowrap;" t-field="ticket.price" t-field-options='{
                                   "widget": "monetary",
                                   "from_currency": "website.currency_id",
                                   "display_currency": "user_id.partner_id.property_product_pricelist.currency_id"
-                                }'/>&amp;nbsp;
+                                }'/>
                               </t>
                               <span t-field="ticket.price_reduce" t-field-options='{
                                "widget": "monetary",
diff --git a/addons/website_forum_doc/views/website_doc.xml b/addons/website_forum_doc/views/website_doc.xml
index 3b0a7894743..74127a91aa7 100644
--- a/addons/website_forum_doc/views/website_doc.xml
+++ b/addons/website_forum_doc/views/website_doc.xml
@@ -149,7 +149,7 @@
                                         from the Q&amp;A section where you can
                                         discuss it and get feedback.
                                     </div>
-                                    &amp;nbsp; <a t-attf-href="/forum/#{slug(forum)}/question/#{slug(post)}" class="fa fa-arrow-right mt16"> Related question</a>
+                                    <a t-attf-href="/forum/#{slug(forum)}/question/#{slug(post)}" class="fa fa-arrow-right mt16 ml8"> Related question</a>
                                 </div>
                             </div>
                         </div>
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index e21a7665986..9312659d4d2 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -88,11 +88,11 @@
       <div itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/Offer" class="product_price" t-if="product.product_variant_ids">
           <b>
               <t t-if="(compute_currency(product.lst_price) - product.price) &gt; 0.1">
-                <del class="text-danger" style="white-space: nowrap;" t-field="product.lst_price" t-field-options='{
+                <del class="text-danger mr8" style="white-space: nowrap;" t-field="product.lst_price" t-field-options='{
                   "widget": "monetary",
                   "from_currency": "product.company_id.currency_id",
                   "display_currency": "user_id.partner_id.property_product_pricelist.currency_id"
-                }'/>&amp;nbsp;
+                }'/>
               </t>
               <span t-field="product.price" style="white-space: nowrap;"  t-field-options='{
                    "widget": "monetary",
@@ -759,12 +759,12 @@
                                   </div>
                               </td>
                               <td class="text-center" id="td-price" name="price">
-                                  <del class="text-danger" t-att-style="'' if (compute_currency(line.product_id.lst_price) - line.price_reduce) &gt; 1 else 'display: none;'" style="text-decoration: line-through; white-space: nowrap;"
+                                  <del class="text-danger mr8" t-att-style="'' if (compute_currency(line.product_id.lst_price) - line.price_reduce) &gt; 1 else 'display: none;'" style="text-decoration: line-through; white-space: nowrap;"
                                     t-field="line.product_id.lst_price" t-field-options='{
                                         "widget": "monetary",
                                         "from_currency": "line.company_id.currency_id",
                                         "display_currency": "user_id.partner_id.property_product_pricelist.currency_id"
-                                    }'/>&amp;nbsp;
+                                    }'/>
                                 <span t-field="line.price_reduce" style="white-space: nowrap;" t-field-options='{
                                      "widget": "monetary",
                                      "from_currency": "website_sale_order.pricelist_id.currency_id",
@@ -866,12 +866,12 @@
                   </td>
                   <td>
                       <t t-if="(compute_currency(product.lst_price) - product.price) &gt; 0.1">
-                        <del class="text-danger" style="white-space: nowrap;"
+                        <del class="text-danger mr8" style="white-space: nowrap;"
                           t-field="product.lst_price" t-field-options='{
                               "widget": "monetary",
                               "from_currency": "product.company_id.currency_id",
                               "display_currency": "user_id.partner_id.property_product_pricelist.currency_id"
-                          }'/>&amp;nbsp;
+                          }'/>
                       </t>
                       <span t-field="product.price" style="white-space: nowrap;" t-field-options='{
                            "widget": "monetary",