ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับคุณสมบัติต่อไปนี้:
text-indentletter-spacingline-heightword-spacingwhite-spacetext-indent คุณสมบัติที่ใช้ในการระบุการเยื้องบรรทัดแรกของข้อความ:
p {
text-indent: 50px;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-indent: 50px;
}
</style>
</head>
<body>
<h1>Using text-indent</h1>
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</body>
</html>
คุณสมบัติ letter-spacing ใช้เพื่อระบุช่องว่างระหว่างอักขระในข้อความ
ตัวอย่างต่อไปนี้สาธิตวิธีการเพิ่มหรือลดช่องว่างระหว่างอักขระ:
h1 {
letter-spacing: 5px;
}
h2 {
letter-spacing: -2px;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
letter-spacing: 5px;
}
h3 {
letter-spacing: -2px;
}
</style>
</head>
<body>
<h1>Using letter-spacing</h1>
<h2>This is heading 1</h2>
<h3>This is heading 2</h3>
</body>
</html>
line-height คุณสมบัติที่ใช้ในการระบุช่องว่างระหว่างบรรทัด:
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
p.small {
line-height: 0.7;
}
p.big {
line-height: 1.8;
}
</style>
</head>
<body>
<h1>Using line-height</h1>
<p>
This is a paragraph with a standard line-height.<br>
The default line height in most browsers is about 110% to 120%.<br>
</p>
<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>
<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>
</body>
</html>
คุณสมบัติ word-spacing ใช้เพื่อระบุช่องว่างระหว่าง คำในข้อความ
ตัวอย่างต่อไปนี้สาธิตวิธีการเพิ่มหรือลดช่องว่างระหว่าง คำ:
p.one {
word-spacing: 10px;
}
p.two {
word-spacing: -2px;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
word-spacing: 10px;
}
p.two {
word-spacing: -2px;
}
</style>
</head>
<body>
<h1>Using word-spacing</h1>
<p>This is a paragraph with normal word spacing.</p>
<p class="one">This is a paragraph with larger word spacing.</p>
<p class="two">This is a paragraph with smaller word spacing.</p>
</body>
</html>
white-space คุณสมบัติระบุวิธีจัดการ white-space ภายในองค์ประกอบ
ตัวอย่างนี้สาธิตวิธีการปิดการใช้งานการตัดข้อความภายในองค์ประกอบ:
p {
white-space: nowrap;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
p {
white-space: nowrap;
}
</style>
</head>
<body>
<h1>Using white-space</h1>
<p>
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
</p>
<p>Try to remove the white-space property to see the difference!</p>
</body>
</html>
ระบุช่องว่างระหว่างอักขระในข้อความ
ระบุความสูงของเส้น
ระบุการเยื้องบรรทัดแรกในบล็อกข้อความ
ระบุวิธีการจัดการช่องว่างภายในองค์ประกอบ
ระบุช่องว่างระหว่างคำในข้อความ