Lengths in CSS Property

As an developer, you may have query regarding which types of length i should use in css property. Am i right ? There are a few CSS properties by taking a length as value. Box model properties are most evident: width, height, margin, padding, border. But many others as well: the offset and the size of a box-shadow or the size and spacing of fonts.  Lets see one bye one with an example. This will help to understand easily.

px  (Absolute length)

.wrap {
width: 400px;
}

Pixels are always a canonical measure on the web but they are constantly manipulated, many other lengths correspond directly to the pixels, and JavaScript speaks pixels. Pixels are perhaps best considered “device pixels” that this length has nothing to do with the screen pixels literal screen you are watching. It is actually a measure angle. It is supposed to be a value that is standardized across devices and screens, but is increasingly no longer true.

cm

.wrap {
width: 20cm;
}

centimeters are more familiar and useful as a physical measurement.  We can map to pixels like this 1cm == 37.8px

in

.wrap {
width: 4in;
}

‘in’ map directly to pixels.This are not used widely

mm

.wrap {
width: 100cm;
}

And an order of magnitude smaller== 37.8px

Em  (Font-Relative Lengths)

.wrap {
width: 40em;
}

A relative unit. Although the length doesn’t change when you change font-family, it does change when you change the font-size.

% (Percentage)

.wrap {
width: 50%;
}

A length set in percentage is based on the length of same property of the parent element. This is widely used. As specially in responsive design this property helps more.

There are also more length options. About which we will discuss on next articles.  However if you need to see more then just visit

Let me know if you have any query.