Javascript for-in loops: How do I relatively increment a CSS value on each iteration?

Javascript for-in loops: How do I relatively increment a CSS value on each
iteration?

Javascript for-in loops: How do I relatively increment a CSS value on each
iteration?
I'm trying to increment a margin-left value with each passing of a loop.
How is this achieved?
Here's the JSFiddle: http://jsfiddle.net/3hxDK/2/
Here's what I'm trying to do:
var myObj = {
"dog":"pony",
"sass":"tude",
"war":"peace"
};
for (i in myObj) {
$('#mainDiv').append("<p>" + i + "</p>");
$('p').css("marginLeft","++20px");
}
So the output would have each
tag incremented by 20px more than the
tag before it.
Any ideas?