My computer is doing what it wants.
I have two divs:
.div_producto {
background-color: rgba(155, 155, 155, 0.7);
border-radius: 3px;
width: 380px;
height: 320px;
margin: 20px auto;
}
<div class="div_producto">
<div style="background-color: #ff0000; margin-top: 140px; width: 140px;">Este es un texto</div>
</div>
When I give the upper margin to div hijo
it, the y moves me div padre
when I try to center the div hijo
for example: margin: 4px auto;
it only centers me in relation to x and y and it does not respect it since it leaves it attached to the upper edge of the parent.
Why is he doing that??
The "problem" is due to margin collapse (
margin collapsing
)Solution:
add parent
overflow: auto;
Example: