Ποιες είναι οι μονάδες μέτρησης στο CSS;

Απόλυτες και σχετικές μονάδες.

Τύπος	Μονάδα	Περιγραφή
Απόλυτες	px	Εικονοστοιχεία, εξαρτώνται από την ανάλυση οθόνης.
	pt	Πόντοι, 1/72 της ίντσας.
	cm	Εκατοστά.
	mm	Χιλιοστά.
	in	Ίντσες, 1 ίντσα = 2.54 cm.
	pc	Πικά, 1 πικά = 12 πόντοι.
Σχετικές	em	Σχετικά με το μέγεθος γραμματοσειράς του γονικού στοιχείου.
	rem	Σχετικά με το μέγεθος γραμματοσειράς του ριζικού στοιχείου (html).
	vw	Σχετικά με το 1% του πλάτους του viewport.
	vh	Σχετικά με το 1% του ύψους του viewport.
	vmin	Σχετικά με το 1% της μικρότερης πλευράς του viewport (πλάτος ή ύψος).
	vmax	Σχετικά με το 1% της μεγαλύτερης πλευράς του viewport (πλάτος ή ύψος).
	%	Σχετικά με το μέγεθος του γονικού στοιχείου (ή του περιέχοντος μπλοκ).
	ch	Σχετικά με το πλάτος του χαρακτήρα '0' της τρέχουσας γραμματοσειράς.
	ex	Σχετικά με το ύψος των πεζών γραμμάτων (ύψος-x) της τρέχουσας γραμματοσειράς.

Η επιλογή της μονάδας εξαρτάται από το πλαίσιο: το px χρησιμοποιείται συχνά για περιγράμματα και raster εικόνες, το rem και το em για γραμματοσειρές και περιθώρια, διασφαλίζοντας καλύτερη κλιμάκωση σε διαφορετικές συσκευές. Οι ποσοστιαίες τιμές είναι χρήσιμες για ευέλικτα σχέδια.

/* Παράδειγμα χρήσης */
.δοχείο {
  width: 80%; /* Σχετικά με τον γονέα */
  margin: 1rem auto; /* Σχετικά με το μέγεθος της γραμματοσειράς του html */
}

.κουτί {
  padding: 20px; /* Απόλυτη τιμή */
  font-size: 1.2em; /* Σχετικά με το μέγεθος της γραμματοσειράς του γονέα */
  width: 50vw; /* Σχετικά με το πλάτος του viewport */
}