Regarding the changing height with/without border:
The reason for this seemingly strange behavior is caused by “margin collapsing”. Under certain circumstances the margins of parent and child elements are collapsed and the bigger one of them is used outside the parent element. But there are situations where this will not happen for example when the parent has a border or text before the child. In this case the margin will be inside the parent.
Since <p> has a default margin-top and margin-bottom of 1em, you see a height difference of 2 * 16px * 1.2 = 38.4px.
Have a nice week to both of you,
Michael