Every element is a rectangle with four layers: content, padding, border, and margin. Almost every spacing bug is a misunderstanding of which layer you changed. Learning the four names turns 'it moved a bit' into 'the padding grew'.
About 1 min of reading
Measure the box surprise.
Set width and padding
Before you run it, say out loud what it will print. Then open the answer.
Fix it
Before you run it, say out loud what it will print. Then open the answer.
An outline draws outside the box and does not affect layout, which makes it the right tool for debugging a box without moving anything. A border changes the size, which is why it is the wrong tool for that check.
When two elements need a gap, decide which one owns it. Setting it on the parent with one property is easier to maintain than setting it on each child, and it survives children being added.
Padding pushes content away from the border and sits inside the element's background. Margin pushes the whole element away from its neighbours and has no background. That difference is why one of them shows the colour and the other does not.
A width of 300 pixels plus padding of 20 gives a total of 340 by default, because padding adds outside the width. That surprise is the box model, and setting the box to include padding is the standard fix.
Two vertical margins next to each other do not add up; the larger one wins. That collapsing explains why a gap is smaller than you set, and it only happens vertically, which is why horizontal spacing behaves differently.
Each one is defined here on this site. Open the entry for the full definition and the other words it points at.