Search⌘ K
AI Features

Length, Size Types and URL Values

Explore how to specify sizes in CSS using units like pixels, ems, and percentages, and understand their effects on layout and cross-platform compatibility. Learn how to apply URL values for setting background images. This lesson helps you accurately control element dimensions and backgrounds for better web page design.

We'll cover the following...

When designing the layout of a page, you often need to specify sizes, such as the width or height of a box, top and bottom margins of paragraphs, and so on.

To indicate size, CSS offers a number of type size options including:

  • pixels
  • points
  • picas
  • inches
  • centimeters
  • millimeters
  • em-heights
  • ex heights
  • percentages

When you define a style property that specifies a size or length value, you always need to specify the unit of measure as well.

The above point is shown in the example below:

NAME_
CSS
p {
margin-top: 4px;
margin-right: 1in;
margin-bottom: 0.5em;
margin-left: 0;
}

The only value that does not need a unit of measure is zero, for it is exactly the same independent of the unit used to calculate it.

The table below summarizes the size type options:


Size type options

Logical units (in,pt,pc,cm,mmin, pt, pc, cm, mm ...