Difference between px, rem, em

please tell me the difference between px, rem, em in sense of web designing which unit is best for website designing and which is best for content and which unit is best for give width and height to any content

Px are pixels. Don’t really need any explanation.

An em is the font size of an element. So, say the font size of one of your <p> elements is 16px, and you had a <sup> element in there

<p>superscript example<sup>hi</sup></p>

if you set the superscript element to 0.5em, it would be half of the parent element’s size, so would render as 8px.

A rem is the same as em, but it’s based on the font size of the root element (normally the <html> element). So if the font size of that was 16px (the default), you could set all paragraph elements to be 1rem (16px), all h1 elements to be 2rem (32px) and so on.

rem units are generally what you would use for most sizing in the document. em units are useful for sizes that need to be based on the size of a parent (like super/subscript is a % of the size of the text it lives in). Pixel units are good for things you want to have specific pixel sizes for (media queries for example).

Entire layouts based on pixel sizes (including font size) used to be the norm, but are normally difficult to work with because you have no idea what the actual size of the viewport any given user is looking at.