CSS2 Percentage Reference

Google+ Pinterest LinkedIn Tumblr +

Introduction
I wrote an article once called, Web Page Design for All Resolutions. In that article I
emphasized on the use of the CSS percentage unit where possible, instead of other units
like the Pixel. This reference is a follow up on that. The percentage unit for a CSS
property is given with respect to some other CSS property. I give you all that relationship
in this article. So as you plan to design your web page for all computer screen resolutions,
you just come here to know the meaning of the percentage value you have to give (if you
do not already know). Note: your browser may not implement all the relationships given
below. Also, many CSS properties do not use measurements (do not use percentage,
pixel, etc.)

The list is not as long as you might think. Note: A containing block is a containing
element. This reference is based on CSS2, which is the latest version of CSS, today.

Note: If you cannot see the code or if you think anything is missing (broken link, image
absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest
problem you have about what you are reading.

100%
The value (property) that the percentage value (property) in question refers to, is 100%.
This means the value in question is a fraction of the value it is referring to (measured
relative to).

CSS Box
Most HTML elements are in the form of a box, with a padding rectangular stripe around
it, then a border rectangular stripe around it and a margin rectangular stripe around it. The
area without padding, border and margin is the Content Area. This content area has width
(horizontal) and height (vertical).

padding-width
Consider an element inside a containing block. The padding-width of the element is given
with respect to the width of the content area of the containing block.
border-width
As of CSS2, you cannot give the border width in percentage. You can give it in pixels.
margin-width
Consider an element inside a containing block. The margin-width of the element is given
with respect to the width of the content area of the containing block.

Dimensions
width
Consider an element inside a containing block. The width of the element is given with
respect to the width of the content area of the containing block.
height
Consider an element inside a containing block. The height of the element is given with
respect to the height of the content area of the containing block.

Positioning
top
This offset is a percentage (fraction) of the containing block’s content width.
right
This offset is a percentage (fraction) of the containing block’s content width.
bottom
This offset is a percentage (fraction) of the containing block’s content width.
left
This offset is a percentage (fraction) of the containing block’s content width.

The background-position Property
This property is used for background image. It is not supported by many browsers. So I
will just quote what is in the specification:

With a value pair of ‘0% 0%’, the upper left corner of the image is aligned with the upper
left corner of the box’s padding edge. A value pair of ‘100% 100%’ places the lower right
corner of the image in the lower right corner of padding area. With a value pair of ‘14%
84%’, the point 14% across and 84% down the image is to be placed at the point 14%
across and 84% down the padding area. If only one percentage or length value is given, it
sets the horizontal position only, the vertical position will be 50%. If two values are
given, the horizontal position comes first. Example: background-position: 100% 100%;

Font-size Property
font-size
A percentage value here specifies a font size with respect to the parent element’s font
size.
text-indent
Here the indentation is a percentage with respect to the width of the content area of the
containing block.

Table
Column Width
The percentage value for the column width is with respect to the Table width.

That is it. Not as long as you might have think. Come here each time for reference.

Chrys

Share.

About Author

Leave A Reply