CSS - Percentage Value

1 - About

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

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.

3 - 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' */

4 - Width: 100% how many pixel

100% is 100% of the actual value of the viewport.

Data Science
Data Analysis
Data Science
Linear Algebra Mathematics

Powered by ComboStrap