CSS - Percentage Value

About

The format of a percentage value is a number followed by the character %.

Percentage values are always relative to another value, for example a length.

Each property that allows percentages also defines the value to which the percentage refers.

The value may be that of :

• another property for the same element,
• a property for an ancestor element,
• the formatting context (e.g., the width of a containing block).

When a percentage value is set for a property of the root element and the percentage is defined as referring to the inherited value of some property, the resultant value is the percentage times the initial value of that property.

Articles Related

Example

• Since child elements (generally) inherit the computed values of their parent, in the following example, the children of the P element will inherit a value of 12px for 'line-height', not the percentage value (120%):

p { font-size: 10px }
p { line-height: 120% }  /* 120% of 'font-size' */

Width: 100% how many pixel

With width: 100% is 100% of the containing element.