I noticed that margin-top: 5% and margin-bottom: %5 is refer to its containing block' width. But why not heigth?
Margin / percentage
The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.