Margin-top percentage not relative to parent

Question

I an having trouble understanding why the \"square\" class isn\'t relative to the parent, \"container\".

i.e - I set the container to have a height of 200px; the \"squa

Answer 1

Vertical padding and margin are relative to the width of the parent. Top and bottom on the other hand are not.

Try to place a div inside another. Use the top property (for example: top: 25%) and make sure you specify a position (e.g. position: relative;)

I've forked and adjusted your code example to demonstrate what I mean: https://codepen.io/anon/pen/Yaqmva

top: 5%;
position: relative;

Answer 2

The margin property takes the width of the parent not the height. You could use some JavaScript to create height related margins.