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

Question

Here is an image to better explain my question

Each control has a bounding box, and each control has margins and indents. In the image, the Difference between the border of the buttons and the border of the bounding box is indicated as GAP-B, is it an addition or a margin?

There is also a gap between the two GAP-A buttons, is this an add-on or a margin?

Answer 1

Gap A is the add-on where Gab B is Margin.

Margin is defined as the gap between an element and each border.

Filling is defined as the gap between the border of two elements.

Answer 2

Gap A is margin and space B is padding.

Filling at the 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 the 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>