margin/padding percentages in CSS calculated against what?
Dear Mozilla Comunity people
I am junior front-end developer. I recently found a Firefox feature that I can't understand.
Here is the code: http://codepen.io/IgorG/pen/eNQwRb?editors=110
Here is the description:
In this code I only operate with .link-1 {} and the "margin-left: ;" property, where I try to understand how margin/padding percentages work and I can't understand what are they calculated against in this situation.
10%-20% - http://screencast.com/t/HnijMxh3 80%-90% - http://screencast.com/t/8tuKEEw31iD
On these two pictures I put margin-left 10% and margin-left 20% on one screenshot, then margin-left 80% and margin-left 90% on another one. I notice that the gap between 80%-90% and 10-20% is much bigger, so...
Here is the question: why is that? What is the calculating formula for Firefox in this example?
Google Chrome work in a more predictable way - the gap between 80%-90% and 10-20% is the same: 10%-20% - http://screencast.com/t/GYzRWICxM32 80%-90% - http://screencast.com/t/u0n7u7jTD
I would be extremely happy to get this margin/padding percentages explained. It would help me a lot in my work, since I use Firefox 99% of time.
Thanks people!
Chosen solution
This is a little confusing because of the display:inline-block rules...
A % margin is computed as a fraction of the width or height of the containing element. Normally a list item has display:list-item which is more similar to display:block. With display:inline-block, the margin seems to be added to the width of the containing element.
To finish the thought:
Thus in the case of 80%, Firefox is enlarging the containing li element enough so that the actual content consumes only 20% of the space.
Read this answer in context 👍 2All Replies (3)
Chosen Solution
This is a little confusing because of the display:inline-block rules...
A % margin is computed as a fraction of the width or height of the containing element. Normally a list item has display:list-item which is more similar to display:block. With display:inline-block, the margin seems to be added to the width of the containing element.
To finish the thought:
Thus in the case of 80%, Firefox is enlarging the containing li element enough so that the actual content consumes only 20% of the space.
Modified by jscher2000 - Support Volunteer
I got it now.
In here, % margin in Firefox is calculated not from the element's width, but the element's absolute width, which includes: element's width, side paddings and side margins too.
As result margin-left 20% will mean:
(element's_width + padding-left + padding-right + margin-left + margin-right) * 20%
The margin is supposed to be computed based on the containing element's width. I think your example is a special case (margin as % of inline-block element without a specified width).