What is really happening in this two examples?

Question

In this two examples I gave margin to the child div element and in return I got two different result. In the second example I add border property and maybe this is the reason for different result. Why this is happening can anyone explain?
https://code.sololearn.com/W8dkhn9Ueyjr

Answer 1

When you set the element's width and height properties using CSS, you set the width and height of the content area.
When you set the background color to a block, it covers the content area, along with the inner fields.

Answer 2

What is your problem?

Can you elaborate more so that I can help.

Also add comments in code that helps understand whats your doubt or problem and solve it faster as there are couple of divs in code.

Answer 3

in those two examples I used everything same. but in the second example I gave a border to the parent div. and the child dive got margin from the parent div. but in the first example it didn't got margin from its parent. the parent div also moved when I gave margin to its child.

Answer 4

Because of border I think child div is getting padding top (I may be wrong also)

See this

https://code.sololearn.com/Wxi5j71AdUBa/?ref=app