The good news is that, if you understand how margins work in CSS, you’re a lot closer to understanding how they work in XAML than the rest of the designers/developers.

First, we’ll look at how it’s used, and then we’ll look at the differences between XAML margins and CSS (which is not that much, really). Margins, naturally lay out the width of the space space around the object on each of its 4 sides (Left, Top, Right, Bottom). The object itself (button/label, whatever) stays ‘looking’ the same size. The space around it is the margin, which designates how close another object can get to it on any particular side of the object.

If you want all 4 areas to have different margins, you need to use all 4. However, just like in CSS, if you want equal margins on all 4 sides, all you need is one number. And, if you want the sides the same as each other, but different from the top and bottom, which you want the same, you just enter 2 numbers – one for the sides and the other number for the top and bottom.

With that said, that’s where the similarities end. For starters, in CSS, you must use ‘px’ for pixels with each number. But for XAML, pixels is assumed, so all you really need are the numbers. With XAML, an ‘equals’ sign is used and for CSS, a colon is used. So, therefore, for HTML, the syntax, using a colon is:

margin:25px 50px 75px 100px; 

While for XAML, using an ‘equals’ sign it’s:

margin="15,30,25,40"

With CSS, the sides start with the TOP. For instance, if you are using all 4 designations (using different margins for all 4 sides), then, you start from the TOP and go clockwise, with the numbers. 5,4,3,2, using CSS means that the TOP margin is 5, the RIGHT margin is 4, the BOTTOM margin is 3 and the LEFT Margin is 2. With XAML, you start with the LEFT side and go clockwise, so that the LEFT margin is 5, the TOP margin is 4, the RIGHT margin is 3 and the BOTTOM margin is 2.

For XAML, if you use the 2 number combination, the first number is for LEFT and RIGHT margins, but for CSS, the first number is for TOP and BOTTOM margins.

The key to remember is that with XAML, with more than 1 number in the margins declaration, you start with the LEFT side and go clockwise, but with CSS, you start with the TOP.