Can anyone clearly specify what are these px,pt,cm,em,etc such length defining elements differ.

Question

pixel, points, cm, em all are same?? 10px is same as 10cm and 10pt, or they have some scale in which all are different?

Answer 1

Personally, I would consider pixels to be a defualt measurement. Its good for defining the size of div, padding and margins. Points and Ems I would leave for typefaces. Out of the two Ems are the more complicated. You set up a defualt font size in your document. In this way your body or any unstyled typefaces will be this size. In order to have a good, measured, and spaced over all typography. Ems acomplish this by basically multiplying the default size. For example:

body {
font-size: 16pt;
}

.title {
font-size: 2em;
}

Here the entire page is set to 16 points. Every word no matter where it is in the doc will be 16pt. Except for any marked with the class title. They would be 32pt.

You can also use percentages % which become life savers for doing responsive design. if you need an element like a p tag or an entire div to be a certain distance no matter the size of the viewport. Use %. For example:

div {
margin-left: 10%;
margin-right; 40%
}

With these percentages set this div - No matter the size of the viewport - will always be 10% from the left and 40% from the right. The percentages will adapt and become smaller as the viewport does but it will always be 10 and 40.