length_unit

enum class xtd::forms::style_sheets::length_unit

strong

The length_unit enum class specifies the units for xtd::forms::style_sheets::length.

Header

#include <xtd/forms/style_sheets/length_unit>

Namespace

xtd::forms::style_sheets

Library

xtd.forms

Remarks

CSS has several different units for expressing a length.

Many CSS properties take "length" values, such as width, margin, padding, font-size, etc.

Length is a number followed by a length unit, such as 10px, 2em, etc.CSS has several different units for expressing a length.

Example

Set different length values, using px (pixels):

control {
  border-width: 3px;
}
 
button {
  border-width: 1px;
  border-radius: 5px;
}

Note

A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted.

Remarks

For some CSS properties, negative lengths are allowed.

There are two types of length units: absolute and relative.

Absolute lengths

The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.

Enum class value	Css potfix	Description
centimeters	cm	centimeters
millimeters	mm	millimeters
inches	in	inches (1in = 96px = 2.54cm)
pixels	px	pixels (1px = 1/96th of 1in)
points	pt	points (1pt = 1/72 of 1in)
picas	pc	picas (1pc = 12 pt)

Relative lengths

Relative length units specify a length relative to another length property. Relative length units scales better between different rendering mediums.

Enum class value	Css potfix	Description
element	em	Relative to the font-size of the element (2em means 2 times the size of the current font)
element_x_height	ex	Relative to the x-height of the current font (rarely used)
chase	ch	Relative to width of the "0" (zero)
root_element	rem	Relative to font-size of the root element
viewport_width	vw	Relative to 1% of the width of the viewport(*)
viewport_height	vh	Relative to 1% of the height of the viewport(*)
viewport_min	vmin	Relative to 1% of viewport's* smaller dimension
viewport_max	vmax	Relative to 1% of viewport's* larger dimension
percent	%	Relative to the parent element

Note

The element(em) and root_element(rem) units are practical in creating perfectly scalable layout! (*) Viewport = the bounds of the element. If the viewport is 50cm wide, 1vw = 0.5cm.

Enumerator
centimeters	Defines a centimeters unit.
millimeters	Defines a millimeters unit.
inches	Defines a inches unit (1in = 96px = 2.54cm).
pixels	Defines pixels unit (1px = 1/96th of 1in).
points	Defines points unit (1pt = 1/72 of 1in).
picas	Defines a picas unit (1pc = 12 pt).
element	Defines a element unit. Relative to the font-size of the element (2em means 2 times the size of the current font).
element_x_height	Defines a element_x_height unit. Relative to the x-height of the current font (rarely used).
chase	Defines a chase unit. Relative to width of the "0" (zero).
root_element	Defines a root_element unit. Relative to font-size of the root elementRelative to font-size of the root element.
viewport_width	Defines a viewport_width unit. Relative to 1% of the width of the viewport.
viewport_height	Defines a viewport_height unit. Relative to 1% of the height of the viewport.
viewport_min	Defines a viewport_min unit. Relative to 1% of viewport's smaller dimension.
viewport_max	Defines a viewport_min unit. Relative to 1% of viewport's larger dimension.
percent	Defines a percent unit. Relative to the parent element.