diff --git a/IPython/html/static/style/ipython.min.css b/IPython/html/static/style/ipython.min.css
index e809946..edbf5cf 100644
--- a/IPython/html/static/style/ipython.min.css
+++ b/IPython/html/static/style/ipython.min.css
@@ -1403,7 +1403,7 @@ h6:hover .anchor-link {
 .widget-text {
   /* String Textbox - used for TextBoxView and TextAreaView */
   width: 350px;
-  margin: 0px !important;
+  margin: 0px;
 }
 .widget-listbox {
   /* Listbox */
@@ -1413,7 +1413,7 @@ h6:hover .anchor-link {
 .widget-numeric-text {
   /* Single Line Textbox - used for IntTextView and FloatTextView */
   width: 150px;
-  margin: 0px !important;
+  margin: 0px;
 }
 .widget-progress {
   /* Progress Bar */
@@ -1451,10 +1451,6 @@ h6:hover .anchor-link {
   display: flex;
   flex-direction: row;
   align-items: stretch;
-  margin-top: 0px !important;
-  margin-bottom: 0px !important;
-  margin-right: 5px;
-  margin-left: 5px;
 }
 .widget-hbox input[type="checkbox"] {
   margin-top: 9px;
diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css
index c42bee0..3b2b2af 100644
--- a/IPython/html/static/style/style.min.css
+++ b/IPython/html/static/style/style.min.css
@@ -9266,7 +9266,7 @@ h6:hover .anchor-link {
 .widget-text {
   /* String Textbox - used for TextBoxView and TextAreaView */
   width: 350px;
-  margin: 0px !important;
+  margin: 0px;
 }
 .widget-listbox {
   /* Listbox */
@@ -9276,7 +9276,7 @@ h6:hover .anchor-link {
 .widget-numeric-text {
   /* Single Line Textbox - used for IntTextView and FloatTextView */
   width: 150px;
-  margin: 0px !important;
+  margin: 0px;
 }
 .widget-progress {
   /* Progress Bar */
@@ -9314,10 +9314,6 @@ h6:hover .anchor-link {
   display: flex;
   flex-direction: row;
   align-items: stretch;
-  margin-top: 0px !important;
-  margin-bottom: 0px !important;
-  margin-right: 5px;
-  margin-left: 5px;
 }
 .widget-hbox input[type="checkbox"] {
   margin-top: 9px;
diff --git a/IPython/html/static/widgets/js/widget_bool.js b/IPython/html/static/widgets/js/widget_bool.js
index 9b84118..0234054 100644
--- a/IPython/html/static/widgets/js/widget_bool.js
+++ b/IPython/html/static/widgets/js/widget_bool.js
@@ -30,7 +30,11 @@ define([
             /**
              * Set a css attr of the widget view.
              */
-            this.$checkbox.css(name, value);
+            if (name == 'padding' || name == 'margin') {
+                this.$el.css(name, value);
+            } else {
+                this.$checkbox.css(name, value);
+            }
         },
 
         handle_click: function() {
diff --git a/IPython/html/static/widgets/js/widget_int.js b/IPython/html/static/widgets/js/widget_int.js
index 4b10705..18af78e 100644
--- a/IPython/html/static/widgets/js/widget_int.js
+++ b/IPython/html/static/widgets/js/widget_int.js
@@ -57,6 +57,8 @@ define([
                 this.$slider_container.css(name, value);
             } else if (name == 'width' || name == 'height' || name == 'background') {
                 this.$slider_container.css(name, value);
+            } else if (name == 'padding' || name == 'margin') {
+                this.$el.css(name, value);
             } else {
                 this.$slider.css(name, value);
             }
@@ -333,7 +335,11 @@ define([
             /**
              * Set a css attr of the widget view.
              */
-            this.$textbox.css(name, value);
+            if (name == 'padding' || name == 'margin') {
+                this.$el.css(name, value);
+            } else {
+                this.$textbox.css(name, value);
+            }
         },
 
         events: {
@@ -468,6 +474,8 @@ define([
                 this.$progress.css(name, value);
             } else if (name == 'color') {                
                 this.$bar.css('background', value);
+            } else if (name == 'padding' || name == 'margin') {
+                this.$el.css(name, value);
             } else {
                 this.$bar.css(name, value);
             }
diff --git a/IPython/html/static/widgets/js/widget_selection.js b/IPython/html/static/widgets/js/widget_selection.js
index 52742ae..25fdccc 100644
--- a/IPython/html/static/widgets/js/widget_selection.js
+++ b/IPython/html/static/widgets/js/widget_selection.js
@@ -135,6 +135,8 @@ define([
             } else if (name == 'height') {
                 this.$droplabel.css(name, value);
                 this.$dropbutton.css(name, value);
+            } else if (name == 'padding' || name == 'margin') {
+                this.$el.css(name, value);
             } else {
                 this.$droplist.css(name, value);
                 this.$droplabel.css(name, value);
@@ -241,7 +243,11 @@ define([
             /**
              * Set a css attr of the widget view.
              */
-            this.$container.css(name, value);
+            if (name == 'padding' || name == 'margin') {
+                this.$el.css(name, value);
+            } else {
+                this.$container.css(name, value);
+            }
         },
 
         handle_click: function (e) {
@@ -356,8 +362,12 @@ define([
             /**
              * Set a css attr of the widget view.
              */
-            this._css_state[name] = value;
-            this.update_style_traits();
+            if (name == 'padding' || name == 'margin') {
+                this.$el.css(name, value);
+            } else {
+                this._css_state[name] = value;
+                this.update_style_traits();
+            }
         },
 
         update_style_traits: function(button) {
@@ -478,7 +488,11 @@ define([
             /**
              * Set a css attr of the widget view.
              */
-            this.$listbox.css(name, value);
+            if (name == 'padding' || name == 'margin') {
+                this.$el.css(name, value);
+            } else {
+                this.$listbox.css(name, value);
+            }
         },
 
         handle_click: function (e) {
diff --git a/IPython/html/static/widgets/js/widget_selectioncontainer.js b/IPython/html/static/widgets/js/widget_selectioncontainer.js
index d1f39c3..25b09cf 100644
--- a/IPython/html/static/widgets/js/widget_selectioncontainer.js
+++ b/IPython/html/static/widgets/js/widget_selectioncontainer.js
@@ -184,7 +184,11 @@ define([
             /**
              * Set a css attr of the widget view.
              */
-            this.$tabs.css(name, value);
+            if (name == 'padding' || name == 'margin') {
+                this.$el.css(name, value);
+            } else {
+                this.$tabs.css(name, value);
+            }
         },
 
         remove_child_view: function(view) {
diff --git a/IPython/html/static/widgets/js/widget_string.js b/IPython/html/static/widgets/js/widget_string.js
index eb1d783..81bd8e3 100644
--- a/IPython/html/static/widgets/js/widget_string.js
+++ b/IPython/html/static/widgets/js/widget_string.js
@@ -125,7 +125,11 @@ define([
             /**
              * Set a css attr of the widget view.
              */
-            this.$textbox.css(name, value);
+            if (name == 'padding' || name == 'margin') {
+                this.$el.css(name, value);
+            } else {
+                this.$textbox.css(name, value);
+            }
         },
         
         events: {
@@ -208,7 +212,11 @@ define([
             /**
              * Set a css attr of the widget view.
              */
-            this.$textbox.css(name, value);
+            if (name == 'padding' || name == 'margin') {
+                this.$el.css(name, value);
+            } else {
+                this.$textbox.css(name, value);
+            }
         },
         
         events: {
diff --git a/IPython/html/static/widgets/less/widgets.less b/IPython/html/static/widgets/less/widgets.less
index 0fddc75..9ca7531 100644
--- a/IPython/html/static/widgets/less/widgets.less
+++ b/IPython/html/static/widgets/less/widgets.less
@@ -145,8 +145,8 @@
 
 .widget-text {
     /* String Textbox - used for TextBoxView and TextAreaView */
-    width         : 350px;
-    margin : 0px !important;
+    width  : 350px;
+    margin : 0px;
 }
 
 .widget-listbox {
@@ -158,7 +158,7 @@
 .widget-numeric-text {
     /* Single Line Textbox - used for IntTextView and FloatTextView */
     width : 150px;
-    margin : 0px !important;
+    margin : 0px;
 }
 
 .widget-progress {
@@ -188,10 +188,6 @@
 .widget-hbox {
     /* Horizontal widgets */
     .hbox();
-    margin-top: 0px !important;
-    margin-bottom: 0px !important;
-    margin-right: 5px;
-    margin-left: 5px;
 
     input[type="checkbox"] {
         margin-top: 9px;
diff --git a/IPython/html/widgets/widget.py b/IPython/html/widgets/widget.py
index b9e8bd8..989b1e4 100644
--- a/IPython/html/widgets/widget.py
+++ b/IPython/html/widgets/widget.py
@@ -434,7 +434,8 @@ class DOMWidget(Widget):
     
     width = CUnicode(sync=True)
     height = CUnicode(sync=True)
-    padding = CUnicode(sync=True)
+    # A default padding of 2.5 px makes the widgets look nice when displayed inline.
+    padding = CUnicode("2.5px", sync=True)
     margin = CUnicode(sync=True)
 
     color = Unicode(sync=True)