Percentage height vs margin of parent element

Question

Here's the fiddle: http://jsfiddle.net/pehrlich/dNLLa/

The child div has a height of 50% of its parent. This confirms that the percentage-of-parent is working correctly. (As per Percentage Height HTML 5/CSS)

That same div has a margin top. If you change it to -50%; in the fiddle, you'll see that it moves completely out of view. The percentage for the margin is being read relative to something else-- perhaps the . It shouldn't be!

What `50%` are you talking about? I see none in the JSFiddle... — Tamara Wijsman, Apr 28 '12 at 16:16
Oops. Here's the correct fiddle! http://jsfiddle.net/pehrlich/dNLLa/1/ — Peter Ehrlich, Apr 29 '12 at 21:12
Compare that to this fiddle here, where 50% margin is a different distance than 50% height: http://jsfiddle.net/pehrlich/dNLLa/4/ — Peter Ehrlich, Apr 29 '12 at 23:38

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

"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."

http://www.w3.org/TR/CSS21/box.html#margin-properties

Div margin-bottom of a proportion of its own height?

JS it is.

edited May 23 '17 at 12:29

Community

1
1

answered Apr 29 '12 at 23:50

Peter Ehrlich

6,969
4
49
65

Percentage height vs margin of parent element

1 Answers1