Why the child element does not take margin relative to parent [duplicate] - html

Question

This question already has answers here:
How do nested vertical margin collapses work?
(3 answers)
Closed 6 years ago.
I am providing the child <p> inside a <div> element a margin, but it is shifting the div element itself. I want to shift down the paragraph to an arbitrary value. I know we can provide padding to parent element, but what about it?
Here, take this example code... Try changing the .square p margin property.
*{
margin: 20px auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.square {
width: 100px;
height: 100px;
background: #f56;
} .square p {
margin: 50px auto;
}
<div class="square"><p>Hi</p></div>
Shouldn't it be relative to the parent element?

Answer 1

p is a block element and this behaviour is expected as the parent square is too.
Try inline-block display for the p tag and you can adjust margins relative the parent. If you want to keep p as a block, you should be giving overflow: hidden for the parent.
Example using inline-block:
*{
margin: 20px auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.square {
width: 100px;
height: 100px;
background: #f56;
} .square p {
margin: 50px auto;
display: inline-block;
}
<div class="square"><p>Hi</p></div>

Answer 2

The problem here is parent-child margin collapsing . One way to fix it is to use overflow: hidden
* {
margin: 20px auto;
box-sizing: border-box;
}
.square {
width: 100px;
height: 100px;
background: #f56;
overflow: hidden;
}
.square p {
margin: 50px auto;
}
<div class="square">
<p>Hi</p>
</div>

Answer 3

You should give display:inline-block; property to child p.
*{
margin: 20px auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.square {
width: 100px;
height: 100px;
background: #f56;
}
.square p {
margin: 50px auto;
display: inline-block;
}
<div class="square"><p>Hi</p></div>