CSS UNITS

Understanding CSS Units

The units in which length is measured can be either absolute such as pixels, points and so on, or relative such as percentages (%) and em units.

Specifying CSS units is obligatory for non-zero values, because there is no default unit. Missing or ignoring a unit would be treated as an error. However, if the value is 0, the unit can be omitted (after all, zero pixels is the same measurement as zero inches).

Relative Length Units

Relative length units specify a length relative to another length property. Relative units are:

UnitDescription
emthe current font-size
exthe x-height of the current font

The em and ex units depend on the font size that’s applied to the element.

Using the Em Unit

A measurement of 1em is equal to the computed value of the font-size property of the element on which it is used. It may be used for vertical or horizontal measurement.

For example, if font-size of the element set to 16px and line-height set to 2.5em then the calculated value of line-height in pixel is 2.5 x 16px = 40px.

EXAMPLE

1.	P {
2.	    font-size: 16px;
3.	    line-height: 2.5em;
4.	}

The exception occurs when em is specified in the value of font-size property itself, in that case it refers to the font size of the parent element.

So, when we specify a font size in em, 1em is equal to the inherited font-size. As such, font-size: 1.2em; makes the text 1.2 times larger than the parent element’s text.

EXAMPLE

•	body {
•	    font-size: 62.5%;
•	    font-family: Arial, Helvetica, sans-serif;
•	}
•	p {
•	    font-size: 1.6em;
•	}
•	p:firt-letter {
•	    font-size: 3em;
•	    font-weight: bold;
•	}

Let’s understand what this code was all about. The default size for the fonts in all modern browsers is 16px. Our first step is to reduce this size for the entire document by setting the body font-size to 62.5%, which resets the font-size to 10px (62.5% of 16px).

This is to round off the default font-size for easy px to em conversion.

Using the Ex Unit

The ex unit is equal to the x-height of the current font.

The x-height is so called because it is often equal to the height of the lowercase ‘x’, as illustrated below. However, an ex is defined even for fonts that do not contain an ‘x’.

Absolute Length Units

Absolute length units are fixed in relation to each other. They are highly dependent on the output medium, so are mainly useful when the output environment is known. The absolute units consist of the physical units (incmmmptpc) and the px unit.

UnitDescription
ininches – 1in is equal to 2.54cm.
cmcentimeters.
mmmillimeters.
ptpoints – In CSS, one point is defined as 1/72 inch (0.353mm).
pcpicas – 1pc is equal to 12pt.
pxpixel units – 1px is equal to 0.75pt.

Absolute physical units such as incmmm, etc. should be used for print media and similar high-resolution devices. Whereas, for on-screen display such as desktop and lower-resolution devices, it is recommended to use the pixel or em units.

EXAMPLE

•	h1 { margin: 0.5in; }       /* inches */
•	h2 { line-height: 3cm; }    /* centimeters */
•	h3 { word-spacing: 4mm; }   /* millimeters */
•	h4 { font-size: 12pt; }     /* points */
•	h5 { font-size: 1pc; }      /* picas */
•	h6 { font-size: 12px; }     /* picas */

CSS Visual Formatting

CSS Visual Formatting Model

The CSS visual formatting model is the algorithm that is used to process the documents for visual media. In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model.

The layout of these boxes is depends on the following factors:

  • box dimensions.
  • type of the element (block or inline).
  • positioning scheme (normal flow, float, and absolute positioning).
  • relationships between elements in the document tree.
  • external information e.g. viewport size, built-in dimensions of images, etc.

Type of Boxes Generated in CSS

Every element displayed on a web page generates a rectangular box. The following section describes the types of boxes that may be generated by an element.

Block-level Elements and Block Boxes

Block-level elements are those elements that are formatted visually as blocks (i.e. takes up the full width available), with a line break before and after the element. For example, paragraph element (<p>), headings (<h1> to <h6>), divisions (<div>) etc.

Generally, block-level elements may contain inline elements and other block-level elements.

Inline-level Elements and Inline Boxes

Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines. For example, emphasized pieces of text within a paragraph (<em>), spans (<span>), strong element (<strong>) etc.

Inline elements typically may only contain text and other inline elements.

Categories: CSS