CSS-egységek

Tartalomjegyzék

CSS-egységek

A CSS-nek több különböző mértékegysége van a hossz kifejezésére.

Sok CSS-tulajdonság „hosszúság” értéket vesz fel, például:

width, margin, padding, font-size

A hosszúság egy szám, amelyet egy hosszegység követ, például:

10px, 2em

Példa

Állítson be különböző hosszértékeket px (pixel) használatával:

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

Próbálja ki Ön is →

<!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>

Megjegyzés: A szám és az egység között nem lehet szóköz. Ha azonban az érték az 0, az egység elhagyható.

Egyes CSS-tulajdonságok esetében a negatív hosszúságok megengedettek.

Kétféle hosszmérték létezik: abszolút és relatív.

Abszolút hosszúságok

Az abszolút hossz mértékegységei rögzítettek, és az ezek bármelyikében kifejezett hossz pontosan ennek a méretnek fog megjelenni.

Abszolút hosszúság mértékegységek használata nem javasolt a képernyőn, mert a képernyő mérete nagyon eltérő. Használhatók azonban, ha ismert a kimeneti közeg, pl ami a nyomtatási elrendezést illeti.

cm

Leírás: centiméter

Próbáld ki

<!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

Leírás: milliméter

Próbáld ki

<!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

Leírás: hüvelyk (1 hüvelyk=96 képpont=2,54 cm)

Próbáld ki

<!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 *

Leírás: képpontok (1 képpont=1/96/1 hüvelyk)

Próbáld ki

<!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

Leírás: pontok (1 pt=1/72/1 hüvelyk)

Próbáld ki

<!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

Leírás: picas (1 db=12 pt)

Próbáld ki

<!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>

* A képpontok (px) a megtekintő eszközhöz viszonyítva vannak. Alacsony dpi-s eszközök esetén az 1px a kijelző egy eszközpixele (pontja). Nyomtatókhoz és nagy felbontáshoz képernyők 1px több eszközpixelt jelent.

Relatív hosszak

A relatív hosszúság mértékegységei egy másik hossztulajdonsághoz viszonyított hosszúságot adnak meg. A relatív hosszúság mértékegységei jobban skálázódnak a különböző megjelenítési médiumok között.

em

Leírás: Az elem betűméretéhez viszonyítva (a 2em az aktuális betűtípus kétszeresét jelenti)

Próbáld ki

<!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

Leírás: Az aktuális betűtípus x-magasságához viszonyítva (ritkán használt)

Próbáld ki

<!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

Leírás: A „0” (nulla) szélességéhez viszonyítva

Próbáld ki

<!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

Leírás: A gyökérelem betűméretéhez viszonyítva

Próbáld ki

<!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

Leírás: A nézetablak szélességének 1%-ához képest*

Próbáld ki

<!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

Leírás: A nézetablak magasságának 1%-ához képest*

Próbáld ki

<!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

Leírás: A nézetablak* kisebb méretének 1%-ához képest

Próbáld ki

<!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

Leírás: A nézetablak* nagyobb méretének 1%-ához képest

Próbáld ki

<!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>

Leírás: A szülőelemhez viszonyítva

Próbáld ki

<!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>

Tipp: Az em és rem egységek praktikusak a tökéletes alkotáshoz méretezhető elrendezés!
* Viewport=a böngészőablak mérete. Ha a látószög 50 cm széles, 1vw=0,5 cm.

Böngésző támogatás

A táblázatban szereplő számok az első böngészőverziót jelzik, amely teljes mértékben támogatja a hosszegység.

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