CSS Lengths

CSS has a wide range of lengths that can be used when setting properties for: border, width, height, margin and padding, just to name a few. We have created a simple little project that will visually show you the differences in the various units that can be used for lengths. Currently we have included in this project, absolute lengths, such as: px, mm, cm, in, pt, pc and relative lengths, such as: em, ex ch and rem.

About CSS Lengths

In CSS, lengths are used to define the size or dimensions of various elements on a web page. CSS lengths are used to specify properties like the width, height, margins, padding, and font sizes. There are several types of CSS length units, and they can be categorized into two main groups: absolute units and relative units.

• Absolute Length Units:

  • Pixels (px): Pixels are a common unit of measurement in web design. A pixel is a single dot on a computer screen and is a fixed unit of measurement. One pixel is equivalent to one device pixel on most screens, but high-density displays may use multiple device pixels to render one CSS pixel.

  • Points (pt): Points are used primarily for specifying font sizes. One point is approximately equal to 1/72 of an inch. They are used for print style sheets and may not be consistent in size across different screens.

  • Picas (pc): Picas are another unit used for print design, with 1 pica equal to 12 points or 1/6 of an inch.

  • Inches (in): An inch is a standard unit of length in the imperial system, and it's not commonly used for web design due to its large size.

  • Centimeters (cm): Centimeters are a metric unit of length and are not commonly used for web design but may be useful in some cases.

  • Millimeters (mm): Millimeters are also a metric unit and are rarely used in web design.

• Relative Length Units:

  • Em (em): The "em" unit is relative to the font size of the parent element. For example, if you set the font size of an element to 1.5em, it will be 1.5 times the font size of its parent element.

  • Rem (rem): The "rem" unit is similar to "em," but it's relative to the root (html) element's font size, providing a more predictable and consistent sizing relative to the base font size.

  • Percentage (%): Percentages are relative to the parent element. For example, setting a width to 50% means it's half the width of its parent element.

  • Viewport Percentage Units (vw, vh, vmin, vmax): These units are relative to the size of the viewport, making them useful for creating responsive designs that adapt to different screen sizes. vw represents a percentage of the viewport width, vh is a percentage of the viewport height, vmin is a percentage of the smaller of the two (width or height), and vmax is a percentage of the larger of the two.

CSS lengths give you flexibility in designing web layouts and ensure that elements respond to different screen sizes and devices. Choosing the right unit depends on the specific design requirements and the context in which you're using them.