CSS มีหน่วยต่างๆ มากมายสำหรับแสดงความยาว
คุณสมบัติ CSS จำนวนมากใช้ค่า "ความยาว" เช่น:
width, margin, padding, font-sizeความยาว คือตัวเลขตามด้วยหน่วยความยาว เช่น:
10px, 2emตั้งค่าความยาวที่แตกต่างกันโดยใช้ px (พิกเซล):
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.54ซม.)
ลองมัน
<!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 *
คำอธิบาย: พิกเซล (1px=1/96 ของ 1 นิ้ว)
ลองมัน
<!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 ของ 1 นิ้ว)
ลองมัน
<!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 (1 ชิ้น=12 พอยต์)
ลองมัน
<!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) สัมพันธ์กับอุปกรณ์รับชม สำหรับอุปกรณ์ที่มีความละเอียดต่ำ 1px คือหนึ่งพิกเซลของอุปกรณ์ (จุด) ของจอแสดงผล สำหรับเครื่องพิมพ์และมีความละเอียดสูง หน้าจอ 1px หมายถึงพิกเซลของอุปกรณ์หลายตัว
หน่วยความยาวสัมพัทธ์ระบุความยาวสัมพันธ์กับคุณสมบัติความยาวอื่น หน่วยความยาวสัมพัทธ์ปรับขนาดได้ดีขึ้นระหว่างสื่อการเรนเดอร์ที่แตกต่างกัน
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 ซม กว้าง 1vw=0.5ซม.
ตัวเลขในตารางระบุเบราว์เซอร์เวอร์ชันแรกที่สนับสนุนโดยสมบูรณ์ หน่วยความยาว
| 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 |