margin

spec/LayoutSpec.js

@@ -36,6 +36,7 @@ function computeDOMLayout(node) {
     var div = document.createElement('div');
     transferPx(div, node, 'width');
     transferPx(div, node, 'height');
+    transferPx(div, node, 'margin');
     parent.appendChild(div);
     (node.children || []).forEach(function(child) {
       renderNode(div, child);
@@ -135,5 +136,13 @@ describe('Layout', function() {
       }]
     });
   });
+
+  it('should layout node with margin', function() {
+    testLayout({
+      style: {width: 100, height: 200, margin: 10}
+    }, {
+      width: 100, height: 200, top: 10, left: 10
+    });
+  });
 });
 

src/Layout.js

@@ -1,6 +1,13 @@
 
 function computeLayout(node) {
 
+  function getMargin(node) {
+    if ('margin' in node.style) {
+      return node.style.margin;
+    }
+    return 0;
+  }
+
   function layoutNode(node, parent) {
     var top = 0;
     var children = [];
@@ -15,8 +22,8 @@ function computeLayout(node) {
     var result = {
       width: node.style.width,
       height: node.style.height,
-      top: parent.top + 0,
+      top: getMargin(node) + parent.top + 0,
-      left: parent.left + 0
+      left: getMargin(node) + parent.left + 0
     };
 
     if (children.length > 0) {