Μονάδες CSS

Πίνακας περιεχομένων

Μονάδες CSS

Το CSS έχει πολλές διαφορετικές μονάδες για την έκφραση ενός μήκους.

Πολλές ιδιότητες CSS λαμβάνουν τιμές "μήκους", όπως:

width, margin, padding, font-size

Το Μήκος είναι ένας αριθμός που ακολουθείται από μια μονάδα μήκους, όπως:

10px, 2em

Παράδειγμα

Ορίστε διαφορετικές τιμές μήκους, χρησιμοποιώντας px (pixel):

 h1 {
  font-size: 60px;
}
p {
  font-size: 25px;
  
  line-height: 50px;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 60px;
}

p {
  font-size: 25px;
  line-height: 50px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

Σημείωση: Δεν μπορεί να εμφανιστεί ένα κενό διάστημα μεταξύ του αριθμού και της μονάδας. Ωστόσο, εάν η τιμή είναι 0, η μονάδα μπορεί να παραλειφθεί.

Για ορισμένες ιδιότητες CSS, επιτρέπονται αρνητικά μήκη.

Υπάρχουν δύο τύποι μονάδων μήκους: απόλυτες και σχετικές.

Απόλυτα Μήκη

Οι μονάδες απόλυτου μήκους είναι σταθερές και ένα μήκος που εκφράζεται σε οποιοδήποτε από αυτά θα εμφανίζεται ως ακριβώς αυτό το μέγεθος.

Οι μονάδες απόλυτου μήκους δεν συνιστώνται για χρήση στην οθόνη, επειδή τα μεγέθη οθόνης ποικίλλουν τόσο πολύ. Ωστόσο, μπορούν να χρησιμοποιηθούν εάν το μέσο εξόδου είναι γνωστό, π.χ ως προς τη διάταξη εκτύπωσης.

cm

Περιγραφή: εκατοστά

Δοκίμασέ το

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 1.5cm;}
h2 {font-size: 1cm;}
p {
  font-size: 0.5cm;
  line-height: 1cm;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

mm

Περιγραφή: χιλιοστά

Δοκίμασέ το

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 15mm;}
h2 {font-size: 10mm;}
p {
  font-size: 5mm;
  line-height: 10mm;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

in

Περιγραφή: ίντσες (1in=96px=2,54cm)

Δοκίμασέ το

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 1in;}
h2 {font-size: 0.5in;}
p {
  font-size: 0.2in;
  line-height: 0.5in;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

px *

Περιγραφή: pixel (1px=1/96ο του 1in)

Δοκίμασέ το

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 50px;}
h2 {font-size: 30px;}
p {
  font-size: 15px;
  line-height: 20px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

pt

Περιγραφή: πόντους (1pt=1/72 από 1in)

Δοκίμασέ το

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 50pt;}
h2 {font-size: 25pt;}
p {
  font-size: 15pt;
  line-height: 25pt;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

pc

Περιγραφή: picas (1pc=12 pt)

Δοκίμασέ το

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 4.5pc;}
h2 {font-size: 3pc;}
p {
  font-size: 1.5pc;
  line-height: 3pc;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

* Τα εικονοστοιχεία (px) είναι σχετικά με τη συσκευή προβολής. Για συσκευές χαμηλού dpi, το 1px είναι ένα pixel συσκευής (κουκκίδα) της οθόνης. Για εκτυπωτές και υψηλή ανάλυση οθόνες 1 εικονοστοιχείο υποδηλώνει πολλαπλά εικονοστοιχεία συσκευής.

Σχετικά μήκη

Οι μονάδες σχετικού μήκους καθορίζουν ένα μήκος σε σχέση με μια άλλη ιδιότητα μήκους. Οι μονάδες σχετικού μήκους κλιμακώνονται καλύτερα μεταξύ διαφορετικών μέσων απόδοσης.

em

Περιγραφή: Σε σχέση με το μέγεθος γραμματοσειράς του στοιχείου (2em σημαίνει 2 φορές το μέγεθος της τρέχουσας γραμματοσειράς)

Δοκίμασέ το

<!DOCTYPE html>
<html>
<head>
<style>
p {
  font-size: 16px;
  line-height: 2em;
}

div {
  font-size: 30px;
  border: 1px solid black;
}

span {
  font-size: 0.5em;
}
</style>
</head>
<body>

<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<div>The font-size of the div element is set to 30px. <span>The span element inside the div element has a font-size of 0.5em, which equals to 0.5x30 = 15px</span>.</div>

</body>
</html>

ex

Περιγραφή: Σε σχέση με το ύψος x της τρέχουσας γραμματοσειράς (που χρησιμοποιείται σπάνια)

Δοκίμασέ το

<!DOCTYPE html>
<html>
<head>
<style>
div {
  font-size: 30px;
  border: 1px solid black;
}

span {
  font-size: 1ex;
}
</style>
</head>
<body>

<div>The font-size of the div element is set to 30px. <span>The span element inside the div element has a font-size of 1ex</span>.</div>

</body>
</html>

ch

Περιγραφή: Σε σχέση με το πλάτος του "0" (μηδέν)

Δοκίμασέ το

<!DOCTYPE html>
<html>
<head>
<style>
body {
 font-size:16px;
}

div {
  font-size: 3ch;
  border: 1px solid black;
}

</style>
</head>
<body>

<p>The font-size of this document is 16px.</p>

<div>The font-size of this div element is 3ch.</div>

<p>The ch unit sets the font-size relative to the width of the character "0".</p>

</body>
</html>

rem

Περιγραφή: Σε σχέση με το μέγεθος γραμματοσειράς του ριζικού στοιχείου

Δοκίμασέ το

<!DOCTYPE html>
<html>
<head>
<style>
body {
 font-size:16px;
}

div {
  font-size: 2rem;
  border: 1px solid black;
}

</style>
</head>
<body>

<p>The font-size of this document is 16px.</p>

<div>The font-size of this div element is 2rem.</div>

<p>The rem unit sets the font-size relative to the browsers base font-size, and will not inherit from its parents.</p>

</body>
</html>

vw

Περιγραφή: Σχετικά με το 1% του πλάτους της θύρας προβολής*

Δοκίμασέ το

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 20vw;
}
</style>
</head>
<body>

<h1>Hello</h1>

<p>Resize the width of the browser window to see how the font-size of h1 changes.</p>
<p>1vw = 1% of viewport width.</p>

</body>
</html>

vh

Περιγραφή: Σχετικά με το 1% του ύψους της θύρας προβολής*

Δοκίμασέ το

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 20vh;
}
</style>
</head>
<body>

<h1>Hello</h1>

<p>Resize the height of the browser window to see how the font-size of h1 changes.</p>
<p>1vh = 1% of viewport height.</p>

</body>
</html>

vmin

Περιγραφή: Σχετικά με το 1% της μικρότερης διάστασης της θύρας προβολής

Δοκίμασέ το

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 15vmin;
}
</style>
</head>
<body>

<h1>Hello</h1>

<p>Resize the browser window (both width and height) to see how the font-size of h1 changes.</p>
<p>1vmin = 1vw or 1vh, whichever is smaller.</p>

</body>
</html>

vmax

Περιγραφή: Σχετικά με το 1% της μεγαλύτερης διάστασης της θύρας προβολής*

Δοκίμασέ το

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 15vmax;
}
</style>
</head>
<body>

<h1>Hello</h1>

<p>Resize the browser window (both width and height) to see how the font-size of h1 changes.</p>
<p>1vmax = 1vw or 1vh, whichever is larger.</p>
<p>The vmax unit is not supported in Internet Explorer or Safari 6.1 and earlier versions.</p>

</body>
</html>

Περιγραφή: Σχετικά με το γονικό στοιχείο

Δοκίμασέ το

<!DOCTYPE html>
<html>
<head>
<style>
body {
 font-size:16px;
}

div {
  font-size: 150%;
  border: 1px solid black;
}

</style>
</head>
<body>

<p>The font-size of this document is 16px.</p>

<div>The font-size of this div element is 150%.</div>

<p>The % unit sets the font-size relative to the current font-size.</p>

</body>
</html>

Συμβουλή: Οι μονάδες em και rem είναι πρακτικές στην τέλεια δημιουργία επεκτάσιμη διάταξη!
* Viewport=το μέγεθος του παραθύρου του προγράμματος περιήγησης. Εάν το παράθυρο προβολής είναι 50 cm πλάτος, 1vw=0,5cm.

Υποστήριξη προγράμματος περιήγησης

Οι αριθμοί στον πίνακα καθορίζουν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως το μονάδα μήκους.

Length Unit
em, ex, %, px, cm, mm, in, pt, pc	1.0	3.0	1.0	1.0	3.5
ch	27.0	9.0	1.0	7.0	20.0
rem	4.0	9.0	3.6	4.1	11.6
vh, vw	20.0	9.0	19.0	6.0	20.0
vmin	20.0	12.0	19.0	6.0	20.0
vmax	26.0	16.0	19.0	7.0	20.0