Skip to: content, navigation

by Tommy Olsson and Paul O’Brien

Percentages

A percentage is an integer, or a decimal number, followed by a percentage character (%). Whitespace characters mustn’t appear between the number and the %. For example, here’s a width declaration that uses a percentage value:

#example {
  width: 50%;
}

A percentage value is, by its nature, relative to something else. The interpretation of percentages differs between CSS properties, so you’ll have to use the reference to find the specific property you’re dealing with, and to identify what its stated percentage value means. In some cases, the interpretation of percentage values can be quite unexpected; for example, vertical padding refers to a percentage of the width—not height—of the containing block.

User-contributed notes

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

The Principles of Beautiful Web Design

Best Seller!

You don’t need to go to Art School to design great looking web sites!

Book Cover: The Principles of Beautiful Web Design

Download the FREE sample chapters