Clarify Size and Anchors UI Tut (#5217)

* Clarify Size and Anchors UI Tut

I read through this doc and it didn't make any sense to me. I opened godot and played with it and realized the text doesn't match the illustrations very well. I've (hopefully) clarified some concepts and made the text better describe what's shown in the pictures. Hopefully this will help somebody!

Cheers!
_ssj71

tutorials/ui/size_and_anchors.rst

@@ -20,21 +20,39 @@ the top of the screen, or maybe the right or left margins.
 .. image:: img/anchors.png
 
 This is done by editing the *margin* properties of controls. Each
-control has four margins: left, right, bottom and top. By default, all of
+control has four margins: left, right, bottom, and top, which correspond
+to the respective edges of the control. By default, all of
 them represent a distance in pixels relative to the top-left corner of
 the parent control or (in case there is no parent control) the viewport.
 
 .. image:: img/margin.png
 
-When horizontal (left, right) and/or vertical (top, bottom) anchors are
-changed to 1, the margin values become relative to the bottom-right
-corner of the parent control or viewport.
+So to make the control wider you can make the right margin larger and/or
+make the left margin smaller. This lets you set the exact placement
+and shape of the control.
+
+The *anchor* properties adjust where the margin distances are relative *to*.
+Each margin has an individual anchor that can be adjusted from the
+beginning to the end of the parent. So the vertical (top, bottom) anchors
+adjust from 0 (top of parent) to 1.0 (bottom of parent) with 0.5 being
+the center, and the control margins will be placed relative to that
+point. The horizontal (left, right) anchors similarly adjust from left to
+right of the parent.
+
+Note that when you wish the edge of a control to be above or left of the
+anchor point, you must change the margin value to be negative.
+
+For example: when horizontal anchors are changed to 1, the margin values
+become relative to the top-right corner of the parent control or viewport.
 
 .. image:: img/marginend.png
 
-Here, the control is set to expand its bottom-right corner with that of
-the parent, so when re-sizing the parent, the control will always cover
-it, leaving a 20 pixel margin:
+Adjusting the two horizontal or the two vertical anchors to different
+values will make the control change size when the parent control does.
+Here, the control is set to anchor its bottom-right corner to the
+parent's bottom-right, while the top-left control margins are still
+anchored to the top-left of the parent, so when re-sizing the parent,
+the control will always cover it, leaving a 20 pixel margin:
 
 .. image:: img/marginaround.png