difficult understanding Margin property
<p>Margin property described by MSDN, quote:</p>

<blockquote>
  <p>The Margin property describes the distance between an element and its child <em>(why not parent?)</em> or peers.</p>
</blockquote>

<p>But how to decide if the margin describes the distance between an element  and  its child(parent) or peers? here are two examples: 
first one:</p>

<pre><code>&lt;GroupBox Header="Experience" Height="200"  Name="yearsExperience"  Width="200"&gt;
    &lt;StackPanel   Margin="0,0,0,0" &gt;
       &lt;RadioButton Content="Up to 1 year" Height="16" Name="novice" Width="120" Margin="0, 10, 0, 0" /&gt;
        &lt;RadioButton Content="1 to 4 years" Height="16" Name="intermediate" Width="120" Margin="0, 20, 0, 0" /&gt;
         &lt;RadioButton Content="5 to 9 years" Height="16" Name="experienced" Width="120" Margin="0, 20, 0, 0" /&gt;
         &lt;RadioButton Content="10 or more" Height="16" Name="accomplished" Width="120" Margin="0, 20, 0, 0" /&gt;
       &lt;/StackPanel&gt;
&lt;/GroupBox&gt;
</code></pre>

<p>second one:</p>

<pre><code>&lt;GroupBox Header="Experience" Height="200"  Name="yearsExperience"  Width="200"&gt;
    &lt;Grid  Margin="0,0,0,0" &gt;
       &lt;RadioButton Content="Up to 1 year" Height="16" Name="novice" Width="120" Margin="0, 10, 0, 0" /&gt;
        &lt;RadioButton Content="1 to 4 years" Height="16" Name="intermediate" Width="120" Margin="0, 20, 0, 0" /&gt;
         &lt;RadioButton Content="5 to 9 years" Height="16" Name="experienced" Width="120" Margin="0, 20, 0, 0" /&gt;
         &lt;RadioButton Content="10 or more" Height="16" Name="accomplished" Width="120" Margin="0, 20, 0, 0" /&gt;
       &lt;/Grid&gt;
&lt;/GroupBox&gt;
</code></pre>

<p>Apparently in the first example, the margin describes the distance between peers (RadioButtons), while in the second example ,the margin describles the distance between RadioButtons and Grid (parent) top, and RadioButtons shall overlap each other. That's really tricky, so what's  really going on?</p>
