There Are Many CSS Size Properties
CSS offers many properties to define the size of fonts and elements on your web pages.
This is a very popular CSS style property. Use it to define the size of your fonts. You can also define the font size using the font shorthand property.
Line height is the size of the space between lines in your text. This is also in the font shorthand property.
This is a CSS 3 style property that defines the size of paged media. While you won't use this on your web pages, you might use it in your print style sheet.
The background-size property is also known as the background stretch property. It allows you to set the size of your background images to better fit your web pages.
When you use a font stack you put your preferred font first, followed in order of preference by other fonts. But one drawback is that if your preferred font isn't available, the second (or third) choice font may be larger or smaller than the first choice font. The font-size-adjust CSS 3 property allows you to set an aspect value to scale the subsequent fonts so they display around the same size as the first choice font.
This property sets the height of a block-level element.
This property sets the width of a block-level element. And don't forget, width in CSS is just the contents of the element, not the padding, margins or border.
Padding is the space around an element inside the border. Take a look at the CSS box model to see exactly where the padding is.
This property defines how wide a border should be around an element. It can also be defined in the border shorthand property.
The margin is the space around an element, outside the border.
This property sets the maximum width that an element should be. Use this property in conjunction with relative sized elements.
Like max-width, min-width sets the minimum width an element should be. This will make sure that relatively sized elements don't get too small to read.
CSS Size Units
There are many CSS size units you can use to define the measurement of your elements on your pages.
- Relative Sizes
Relative sizes are sizes that are defined in relation to something else in the document. For fonts this would usually be the default font size. Relative size units include: em (originally relative to the width of the uppercase M character in the font, now a proportional value of the width and height of the font), ex (relative to the height of the lowercase x character of a font), px (relative to the viewing device), larger and smaller (relative to the parent element), and percentage (%) which is relative to the size of the parent element.
- Absolute Sizes
Absolute sizes are units that have an exact size in some context. They include: inches (in), centimeters (cm), millimeters (mm), points (pt), picas (pc), and the browser size keywords: xx-small, x-small, small, medium, large, x-large, and xx-large.
Choosing between absolute and relative size measures is more than just a matter of personal preference. Sizes of fonts on the screen do best with a relative size so that the fonts flex with the browser size accordingly. But use points or picas for print style sheets so that your pages print correctly. And for layout elements, there are benefits to both fixed width and liquid layouts. Personally, for layouts I prefer to create a mixed approach with relatively sized containers that have min- and max-widths assigned to them.