Fix some bugs found by the widget examples,

add margin and padding base traits,
add overflow traits to box base.

IPython/html/static/widgets/js/widget.js

@@ -409,39 +409,72 @@ define(["widgets/js/manager",
             // Public constructor
             DOMWidgetView.__super__.initialize.apply(this, [parameters]);
             this.on('displayed', this.show, this);
-            this.after_displayed(function() {
-                this.update_visible(this.model, this.model.get("visible"));
-                this.update_css(this.model, this.model.get("_css"));
-            }, this);
             this.model.on('change:visible', this.update_visible, this);
             this.model.on('change:_css', this.update_css, this);
+
             this.model.on('change:_dom_classes', function(model, new_classes) {
                 var old_classes = model.previous('children');
                 this.update_classes(old_classes, new_classes);
             }, this);
+
             this.model.on('change:fore_color', function (model, value) { 
                 this.update_attr('color', value); }, this);
+
             this.model.on('change:back_color', function (model, value) { 
                 this.update_attr('background', value); }, this);
+
             this.model.on('change:width', function (model, value) { 
                 this.update_attr('width', value); }, this);
+
             this.model.on('change:height', function (model, value) { 
                 this.update_attr('height', value); }, this);
+
             this.model.on('change:border_color', function (model, value) { 
                 this.update_attr('border-color', value); }, this);
+
             this.model.on('change:border_width', function (model, value) { 
                 this.update_attr('border-width', value); }, this);
+
             this.model.on('change:border_style', function (model, value) { 
                 this.update_attr('border-style', value); }, this);
+
             this.model.on('change:font_style', function (model, value) { 
                 this.update_attr('font-style', value); }, this);
+
             this.model.on('change:font_weight', function (model, value) { 
                 this.update_attr('font-weight', value); }, this);
+
             this.model.on('change:font_size', function (model, value) { 
                 this.update_attr('font-size', value); }, this);
+
             this.model.on('change:font_family', function (model, value) { 
                 this.update_attr('font-family', value); }, this);
-            this.update_classes([], this.model.get('_dom_classes'));
+
+            this.model.on('change:padding', function (model, value) { 
+                this.update_attr('padding', value); }, this);
+
+            this.model.on('change:margin', function (model, value) { 
+                this.update_attr('margin', value); }, this);
+
+            this.after_displayed(function() {
+                this.update_visible(this.model, this.model.get("visible"));
+                this.update_css(this.model, this.model.get("_css"));
+
+                this.update_classes([], this.model.get('_dom_classes'));
+                this.update_attr('color', this.model.get('fore_color'));
+                this.update_attr('background', this.model.get('back_color'));
+                this.update_attr('width', this.model.get('width'));
+                this.update_attr('height', this.model.get('height'));
+                this.update_attr('border-color', this.model.get('border_color'));
+                this.update_attr('border-width', this.model.get('border_width'));
+                this.update_attr('border-style', this.model.get('border_style'));
+                this.update_attr('font-style', this.model.get('font_style'));
+                this.update_attr('font-weight', this.model.get('font_weight'));
+                this.update_attr('font-size', this.model.get('font_size'));
+                this.update_attr('font-family', this.model.get('font_family'));
+                this.update_attr('padding', this.model.get('padding'));
+                this.update_attr('margin', this.model.get('margin'));
+            }, this);
         },
 
         update_attr: function(name, value) {

IPython/html/static/widgets/js/widget_box.js

@@ -14,6 +14,12 @@ define([
             this.model.on('change:children', function(model, value) {
                 this.update_children(model.previous('children'), value);
             }, this);
+            this.model.on('change:overflow_x', function(model, value) {
+                this.update_overflow_x();
+            }, this);
+            this.model.on('change:overflow_y', function(model, value) {
+                this.update_overflow_y();
+            }, this);
         },
 
         update_attr: function(name, value) {
@@ -26,6 +32,18 @@ define([
             this.$box = this.$el;
             this.$box.addClass('widget-box');
             this.update_children([], this.model.get('children'));
+            this.update_overflow_x();
+            this.update_overflow_y();
+        },
+
+        update_overflow_x: function() {
+            // Called when the x-axis overflow setting is changed.
+            this.$box.css('overflow-x', this.model.get('overflow_x'));
+        },
+
+        update_overflow_y: function() {
+            // Called when the y-axis overflow setting is changed.
+            this.$box.css('overflow-y', this.model.get('overflow_y'));
         },
         
         update_children: function(old_list, new_list) {

IPython/html/widgets/widget.py

@@ -385,6 +385,8 @@ class DOMWidget(Widget):
     
     width = CUnicode(sync=True)
     height = CUnicode(sync=True)
+    padding = CUnicode(sync=True)
+    margin = CUnicode(sync=True)
 
     fore_color = Unicode(sync=True)
     back_color = Unicode(sync=True)

IPython/html/widgets/widget_box.py

@@ -18,6 +18,16 @@ class Box(DOMWidget):
     # Using a tuple here to force reassignment to update the list.
     # When a proper notifying-list trait exists, that is what should be used here.
     children = Tuple(sync=True, allow_none=False)
+    
+    _overflow_values = ['visible', 'hidden', 'scroll', 'auto', 'initial', 'inherit', '']
+    overflow_x = CaselessStrEnum(
+        values=_overflow_values, 
+        default_value='', allow_none=False, sync=True, help="""Specifies what
+        happens to content that is too large for the rendered region.""")
+    overflow_y = CaselessStrEnum(
+        values=_overflow_values, 
+        default_value='', allow_none=False, sync=True, help="""Specifies what
+        happens to content that is too large for the rendered region.""")
 
     def __init__(self, children = (), **kwargs):
         kwargs['children'] = children