What is the diference between Margin and Padding and contribution of the bounding box?

Question

Here is image to explain my question better

Every control has bounding box and every control has margins and padding. In the image The Gap between button border and the border of the bounding box is labeled as GAP-B, is this the padding or Margin?

Also there is gap between the two buttons GAP-A, is this the padding or margin?

Answer 1

Gap A is Margin and Gap B is Padding.

Padding on second Border

 <StackPanel>
    <Border  Height="100" Width="400" >
        <Button  Content="StackOverFlow" Background="Yellow"/>
    </Border>
    <Border Padding="20" Background="Lime"  Height="100" Width="400">
        <Button  Content="StackOverFlow" Background="Yellow"/>
    </Border>
</StackPanel>

Margin on second border

    <StackPanel>
    <Border  Height="100" Width="400" >
        <Button  Content="StackOverFlow" Background="Yellow"/>
    </Border>
    <Border Margin="20" Background="Lime"  Height="100" Width="400">
        <Button  Content="StackOverFlow" Background="Yellow"/>
    </Border>
</StackPanel>