word-spacing | CSS | WebReference
Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ. ΠΡΠ»ΠΈ Π΄Π»Ρ ΡΠ΅ΠΊΡΡΠ° Π·Π°Π΄Π°Π½ΠΎ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΡΠ΅Π· text-align ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ justify (Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅), ΡΠΎ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ Π±ΡΠ΄Π΅Ρ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ ΠΏΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎ, Π½ΠΎ Π½Π΅ ΠΌΠ΅Π½ΡΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ΅ΡΠ΅Π· word-spacing.
ΠΡΠ°ΡΠΊΠ°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ | normal |
---|---|
ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ | ΠΠ° |
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ | ΠΠΎ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ |
ΠΠ½ΠΈΠΌΠΈΡΡΠ΅ΡΡΡ | ΠΠ° |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ?
word-spacing: <ΡΠ°Π·ΠΌΠ΅Ρ> | normal
ΠΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ | ΠΡΠΈΠΌΠ΅Ρ | |
---|---|---|
<ΡΠΈΠΏ> | Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠΈΠΏ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. | <ΡΠ°Π·ΠΌΠ΅Ρ> |
AΒ &&Β B | ΠΠ½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡΡΡ Π² ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅. | <ΡΠ°Π·ΠΌΠ΅Ρ> && <ΡΠ²Π΅Ρ> |
A | B | Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π½Π°Π΄ΠΎ Π²ΡΠ±ΡΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ· ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½Π½ΡΡ (A ΠΈΠ»ΠΈ B). | normal | small-caps |
A || B | ΠΠ°ΠΆΠ΄ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠ»ΠΈ ΡΠΎΠ²ΠΌΠ΅ΡΡΠ½ΠΎ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ Π² ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅. | width || count |
[ ] | ΠΡΡΠΏΠΏΠΈΡΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. | [ crop || cross ] |
* | ΠΠΎΠ²ΡΠΎΡΡΡΡ Π½ΠΎΠ»Ρ ΠΈΠ»ΠΈ Π±ΠΎΠ»ΡΡΠ΅ ΡΠ°Π·. | [,<Π²ΡΠ΅ΠΌΡ>]* |
+ | ΠΠΎΠ²ΡΠΎΡΡΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ Π±ΠΎΠ»ΡΡΠ΅ ΡΠ°Π·. | <ΡΠΈΡΠ»ΠΎ>+ |
? | Π£ΠΊΠ°Π·Π°Π½Π½ΡΠΉ ΡΠΈΠΏ, ΡΠ»ΠΎΠ²ΠΎ ΠΈΠ»ΠΈ Π³ΡΡΠΏΠΏΠ° Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΌ. | inset? |
{A, B} | ΠΠΎΠ²ΡΠΎΡΡΡΡ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ A, Π½ΠΎ Π½Π΅ Π±ΠΎΠ»Π΅Π΅ B ΡΠ°Π·. | <ΡΠ°Π΄ΠΈΡΡ>{1,4} |
# | ΠΠΎΠ²ΡΠΎΡΡΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ Π±ΠΎΠ»ΡΡΠ΅ ΡΠ°Π· ΡΠ΅ΡΠ΅Π· Π·Π°ΠΏΡΡΡΡ. | <Π²ΡΠ΅ΠΌΡ># |
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡΡΡ Π»ΡΠ±ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ Π΄Π»ΠΈΠ½Ρ, ΠΏΡΠΈΠ½ΡΡΡΠ΅ Π² CSS β Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΈΠΊΡΠ΅Π»ΠΈ (px), Π΄ΡΠΉΠΌΡ (in), ΠΏΡΠ½ΠΊΡΡ (pt) ΠΈ Π΄Ρ. ΠΠΎΠΏΡΡΡΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, Π½ΠΎ ΡΠΈΡΠ°Π΅ΠΌΠΎΡΡΡ ΡΠ΅ΠΊΡΡΠ° ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΠ½ΠΈΠ·ΠΈΡΡΡΡ. ΠΡΠΎΡΠ΅Π½ΡΠ½Π°Ρ Π·Π°ΠΏΠΈΡΡ Π·Π°ΠΏΡΠ΅ΡΠ΅Π½Π°.
- normal
- Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎ.
ΠΠ΅ΡΠΎΡΠ½ΠΈΡΠ°
ΠΠΈΠ½Π½ΠΈ-ΠΡΡ Π±ΡΠ» Π²ΡΠ΅Π³Π΄Π° Π½Π΅ ΠΏΡΠΎΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄ΠΊΡΠ΅ΠΏΠΈΡΡΡΡ, Π² ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ ΡΠ°ΡΠΎΠ² Π² ΠΎΠ΄ΠΈΠ½Π½Π°Π΄ΡΠ°ΡΡ ΡΡΡΠ°, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π² ΡΡΠΎ Π²ΡΠ΅ΠΌΡ Π·Π°Π²ΡΡΠ°ΠΊ ΡΠΆΠ΅ Π΄Π°Π²Π½ΠΎ ΠΎΠΊΠΎΠ½ΡΠΈΠ»ΡΡ, Π° ΠΎΠ±Π΅Π΄ Π΅ΡΡ ΠΈ Π½Π΅ Π΄ΡΠΌΠ°Π» Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ. Π, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, ΠΎΠ½ ΡΡΡΠ°ΡΠ½ΠΎ ΠΎΠ±ΡΠ°Π΄ΠΎΠ²Π°Π»ΡΡ, ΡΠ²ΠΈΠ΄Π΅Π², ΡΡΠΎ ΠΡΠΎΠ»ΠΈΠΊ Π΄ΠΎΡΡΠ°ΡΡ ΡΠ°ΡΠΊΠΈ ΠΈ ΡΠ°ΡΠ΅Π»ΠΊΠΈ.
ΠΡΠΈΠΌΠ΅Ρ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>word-spacing</title>
<style>
.tel {
word-spacing: 10px;
font-size: 2em;
}
</style>
</head>
<body>
<p>Π’Π΅Π».: 555-221-061</p>
</body>
</html>
Π Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π·Π°Π΄Π°ΡΡΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΎΠΌΠ΅ΡΠΎΠΌ ΡΠ΅Π»Π΅ΡΠΎΠ½Π° ΠΈ ΡΠ΅ΠΊΡΡΠΎΠΌ (ΡΠΈΡ.Β 1).
Π ΠΈΡ. 1. ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° word-spacing
ΠΠ±ΡΠ΅ΠΊΡΠ½Π°Ρ ΠΌΠΎΠ΄Π΅Π»Ρ
ΠΠ±ΡΠ΅ΠΊΡ.style.wordSpacing
Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ?
Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ
ΠΠ°ΠΆΠ΄Π°Ρ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΠΏΡΠΎΡ ΠΎΠ΄ΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠ°Π΄ΠΈΠΉ ΠΎΠ΄ΠΎΠ±ΡΠ΅Π½ΠΈΡ.
- Recommendation (Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΡ) β ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΠΎΠ΄ΠΎΠ±ΡΠ΅Π½Π° W3C ΠΈ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π½Π° ΠΊΠ°ΠΊ ΡΡΠ°Π½Π΄Π°ΡΡ.
- Candidate Recommendation (ΠΠΎΠ·ΠΌΠΎΠΆΠ½Π°Ρ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΡ) β Π³ΡΡΠΏΠΏΠ°, ΠΎΡΠ²Π΅ΡΠ°ΡΡΠ°Ρ Π·Π° ΡΡΠ°Π½Π΄Π°ΡΡ, ΡΠ΄ΠΎΠ²Π»Π΅ΡΠ²ΠΎΡΠ΅Π½Π°, ΠΊΠ°ΠΊ ΠΎΠ½ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΡΠ²ΠΎΠΈΠΌ ΡΠ΅Π»ΡΠΌ, Π½ΠΎ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΏΠΎΠΌΠΎΡΡ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²Π° ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΠΏΠΎ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΡΠ°Π½Π΄Π°ΡΡΠ°.
- Proposed Recommendation (ΠΡΠ΅Π΄Π»Π°Π³Π°Π΅ΠΌΠ°Ρ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΡ) β Π½Π° ΡΡΠΎΠΌ ΡΡΠ°ΠΏΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ Π½Π° ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΠ΅ ΠΠΎΠ½ΡΡΠ»ΡΡΠ°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠΎΠ²Π΅ΡΠ° W3C Π΄Π»Ρ ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΡΠ²Π΅ΡΠΆΠ΄Π΅Π½ΠΈΡ.
- Working Draft (Π Π°Π±ΠΎΡΠΈΠΉ ΠΏΡΠΎΠ΅ΠΊΡ) β Π±ΠΎΠ»Π΅Π΅ Π·ΡΠ΅Π»Π°Ρ Π²Π΅ΡΡΠΈΡ ΡΠ΅ΡΠ½ΠΎΠ²ΠΈΠΊΠ° ΠΏΠΎΡΠ»Π΅ ΠΎΠ±ΡΡΠΆΠ΄Π΅Π½ΠΈΡ ΠΈ Π²Π½Π΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠΏΡΠ°Π²ΠΎΠΊ Π΄Π»Ρ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΡ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²ΠΎΠΌ.
- Editor’s draft (Π Π΅Π΄Π°ΠΊΡΠΎΡΡΠΊΠΈΠΉ ΡΠ΅ΡΠ½ΠΎΠ²ΠΈΠΊ) β ΡΠ΅ΡΠ½ΠΎΠ²Π°Ρ Π²Π΅ΡΡΠΈΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ° ΠΏΠΎΡΠ»Π΅ Π²Π½Π΅ΡΠ΅Π½ΠΈΡ ΠΏΡΠ°Π²ΠΎΠΊ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°ΠΌΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ°.
- Draft (Π§Π΅ΡΠ½ΠΎΠ²ΠΈΠΊ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ) β ΠΏΠ΅ΡΠ²Π°Ρ ΡΠ΅ΡΠ½ΠΎΠ²Π°Ρ Π²Π΅ΡΡΠΈΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ°.
ΠΡΠ°ΡΠ·Π΅ΡΡ
Π ΡΠ°Π±Π»ΠΈΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ.
- Β β ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ Π΄ΠΎΠΏΡΡΡΠΈΠΌΡΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ;
- Β β ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ Π½Π΅ Π²ΠΎΡΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅ΡΡΡ ΠΈ ΠΈΠ³Π½ΠΎΡΠΈΡΡΠ΅ΡΡΡ;
- Β β ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΎΡΠΈΠ±ΠΎΠΊ, Π»ΠΈΠ±ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π»ΠΈΡΡ ΡΠ°ΡΡΠΈΡΠ½ΠΎ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π΅ Π²ΡΠ΅ Π΄ΠΎΠΏΡΡΡΠΈΠΌΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π΅ΠΉΡΡΠ²ΡΡΡ ΠΈΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π½Π΅ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΊΠ°Π·Π°Π½Ρ Π² ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ.
Π§ΠΈΡΠ»ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π²Π΅ΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π½Π°ΡΠΈΠ½Π°Ρ Ρ ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ.
ΓΠΠ²ΡΠΎΡ ΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ
ΠΠ²ΡΠΎΡ: ΠΠ»Π°Π΄ ΠΠ΅ΡΠΆΠ΅Π²ΠΈΡ
ΠΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅: 29.08.2017
Π Π΅Π΄Π°ΠΊΡΠΎΡΡ: ΠΠ»Π°Π΄ ΠΠ΅ΡΠΆΠ΅Π²ΠΈΡ
Π Π°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ (ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ word-spacing)
word-spacing
<style> div { word-spacing: normal; } </style> <div><code>word-spacing</code> Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ, ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ΅ΠΊΡΡ ΠΈ ΡΡΡΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ</div>
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ word-spacing
CSS
ΠΠ΅ΠΆΠ΄Ρ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠΈΠΌΠ²ΠΎΠ» ΠΏΡΠΎΠ±Π΅Π»Π°. ΠΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° word-spacing
Π·Π°Π΄Π°ΡΡ ΠΊ ΠΏΡΠΎΠ±Π΅Π»Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅, ΡΠ΅ΠΌ ΡΠ°ΠΌΡΠΌ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Ρ ΠΎΡΡΡΡΠΏ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ. ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, Π½Π°ΠΎΠ±ΠΎΡΠΎΡ, ΡΠΌΠ΅Π½ΡΡΠ°Π΅Ρ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ word-spacing
Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
ΠΎΡ Π΄Π»ΠΈΠ½Ρ ΡΠΈΠΌΠ²ΠΎΠ»Π° ΠΏΡΠΎΠ±Π΅Π»Π°. Π‘ΠΊΠΎΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ.
ΠΡΡΡΡΠΏΡ ΠΌΠ΅ΠΆΠ΄Ρ inline
ΠΈΠ»ΠΈ inline-block
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ
ΠΡΠ»ΠΈ Π΄Π²Π° ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΎΠ±Π΅Π»Π° ΠΈΠ΄ΡΡ ΠΏΠΎΠ΄ΡΡΠ΄ ΠΈ Π½Π΅ ΡΠ²Π»ΡΡΡΡΡ Π½Π΅ΡΠ°Π·ΡΡΠ²Π½ΡΠΌΠΈ, ΡΠΎ ΠΎΠ½ΠΈ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡΡΡ ΠΊΠ°ΠΊ ΠΎΠ΄ΠΈΠ½. ΠΠ½Π°ΠΊ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠ° Π½Π° Π½ΠΎΠ²ΡΡ ΡΡΡΠΎΠΊΡ ΡΠ°ΠΊΠΆΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠΎΠ±Π΅Π»ΡΠ½ΡΠΌ ΡΠΈΠΌΠ²ΠΎΠ»ΠΎΠΌ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Β«ΡΠ»ΠΎΠ²ΠΎ Π² ΡΠ»ΠΎΠ²ΠΎ ΠΏΡΠΎ ΡΠ»ΠΎΠ²ΠΎΒ» Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ΄Π΅ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°ΠΊ:
Β«ΡΠ»ΠΎΠ²ΠΎ Π² ΡΠ»ΠΎΠ²ΠΎ ΠΏΡΠΎ ΡΠ»ΠΎΠ²ΠΎΒ»ΠΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅
inline
ΠΈ inline-block
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΎ ΠΆΠ΅ ΠΊΠ°ΠΊ ΠΈ Ρ ΡΠ»ΠΎΠ² Π²Π½Π΅ ΡΠ΅Π³ΠΎΠ², Π½Π° Π½ΠΈΡ
ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΡΡΡΡ ΡΠ΅ ΠΆΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS [ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅]. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Β«ΡΠ»ΠΎΠ²ΠΎ Π² ΡΠ»ΠΎΠ²ΠΎ
ΠΏΡΠΎ
ΡΠ»ΠΎΠ²ΠΎΒ».<style> span { display: inline-block; padding: .5em; border: 1px solid green; background-color: #fff5d7; } </style> Β«<span>ΡΠ»ΠΎΠ²ΠΎ</span> <span>Π²</span> <span>ΡΠ»ΠΎΠ²ΠΎ</span> <span>ΠΏΡΠΎ</span> <span>ΡΠ»ΠΎΠ²ΠΎ</span>Β»
ΠΠ°ΠΊ ΡΠ±ΡΠ°ΡΡ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ inline-block
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ
<style> li { display: inline-block; padding: .5em; border: 1px solid green; background-color: #fff5d7; } </style> <ol> <li></li> <li></li> <li></li> <li></li> <li></li> </ol>
ΠΠ°ΡΠΈΠ°Π½Ρ 1. Π£Π΄Π°Π»ΠΈΡΡ ΡΠΈΠΌΠ²ΠΎΠ» ΠΏΡΠΎΠ±Π΅Π»Π°
<style> li { display: inline-block; padding: .5em; border: 1px solid green; background-color: #fff5d7; } </style> <ol> <li></li><li></li><li></li><li></li><li></li> </ol>
Π HTML5 Π΄Π»Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π·Π°ΠΊΡΡΠ²Π°ΡΡΠΈΠΉΡΡ ΡΠ΅Π³ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΠΏΡΡΠ΅Π½. ΠΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ, ΡΡΠΎ ΠΎΠ½ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅Π΄ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΌ Π² ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΡΠ΅Π³ΠΎΠΌ (ΡΠΊΠ°ΠΆΠ΅ΠΌ, </li>
ΠΏΡΠΈΠΆΠ°Ρ Π±Π΅Π· ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΊΠ° ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ <li>
ΠΈΠ»ΠΈ ΠΊ Π·Π°ΠΊΡΡΠ²Π°ΡΡΠ΅ΠΌΡΡΡ ΡΠ΅Π³Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°).
<style> li { display: inline-block; padding: .5em; border: 1px solid green; background-color: #fff5d7; } </style> <ol> <li> <li> <li> <li> <li> </ol>
ΠΠ°ΡΠΈΠ°Π½Ρ 2. ΠΠ°Π΄Π°ΡΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ word-spacing
ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
<style> ol { word-spacing: -100%; } li { display: inline-block; padding: .5em; border: 1px solid green; background-color: #fff5d7; } </style> <ol> <li></li> <li></li> <li></li> <li></li> <li></li> </ol>
ΠΠ°ΠΊ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» ΠΌΠ΅ΠΆΠ΄Ρ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ
ΠΡΠ»ΠΈ ΡΡΡΠΎΠΊΠ° Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ Ρ ΠΏΡΠΎΠ±Π΅Π»Π°, ΡΠΎ ΠΎΠ½ ΠΈΠ³Π½ΠΎΡΠΈΡΡΠ΅ΡΡΡ. ΠΡΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ, ΡΠΌΠ΅ΡΡΠ½Π½ΡΠΉ Π²Π½ΠΈΠ· inline-Π±Π»ΠΎΠΊ Π²ΠΏΠ»ΠΎΡΠ½ΡΡ ΠΏΡΠΈΠΆΠΈΠΌΠ°Π΅ΡΡΡ ΠΊ Π³ΡΠ°Π½ΠΈΡΠ΅ ΠΏΡΠ΅Π΄ΠΊΠ°. Π§ΡΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΡΠ΅ΠΌ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ margin
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
<style> ol { border: 1px solid blue; padding: 0; overflow: auto; resize: horizontal; } ol li { display: inline-block; margin: 0; border: 1px solid green; padding: .5em; vertical-align: middle; background-color: #fff5d7; } ol:nth-of-type(1) { word-spacing: 4em; } ol:nth-of-type(1) li { word-spacing: normal; } ol:nth-of-type(2) li + li { margin-left: 4em; } </style> <ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> <ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol>
ΠΠΎΠΆΠ½ΠΎ ΡΠ°ΠΊΠΆΠ΅ Π²Π·Π³Π»ΡΠ½ΡΡΡ Π½Π° ΠΏΠΎΡ ΠΎΠΆΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ Π±Π»ΠΎΠΊΠΎΠ² ΠΏΠΎ ΡΠ΅Π½ΡΡΡ
word-spacing — ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ
12.0+ | 6.0+ | 1.0+ | 1.0+ | 3.5+ | 1.0+ |
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅
CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ word-spacing
ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΏΡΠΎΠ±Π΅Π»ΠΎΠ² ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
ΠΠΎΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ. Π ΡΠ»ΡΡΠ°Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ Π±ΡΠ΄Π΅Ρ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΏΡΠΎΠ±Π΅Π»Π°.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π΄Π»Ρ ΡΠ΅Π³ΡΠ»ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠΉ ΠΌΠ΅ΠΆΠ΄Ρ Π±ΡΠΊΠ²Π°ΠΌΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ letter-spacing, Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠΎΠΊ — line-height.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: | normal |
---|---|
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ: | ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΊ ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ::first-letter ΠΈ ::first-line |
ΠΠ½ΠΈΠΌΠΈΡΡΠ΅ΡΡΡ: | Π΄Π° |
ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ: | Π΄Π° |
ΠΠ΅ΡΡΠΈΡ: | CSS1 |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ JavaScript: | object.style.wordSpacing=»10px» |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
word-spacing: normal|ΡΠΈΡΠΈΠ½Π°|inherit;
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ. | |
ΡΠΈΡΠΈΠ½Π° | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π΅Π΄ΠΈΠ½ΠΈΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ Π² CSS. |
inherit | Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
ΠΡΠΈΠΌΠ΅Ρ
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ word-spacing Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ Π² ΡΠ΅ΠΊΡΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
div {
word-spacing: normal;
}
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ word-spacing | CSS ΡΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ
CSS ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅
CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ word-spacing ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅Ρ ΠΈΠ»ΠΈ ΡΠΌΠ΅Π½ΡΡΠ°Π΅Ρ ΠΏΡΠΎΠ±Π΅Π» ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ Π² ΡΠ΅ΠΊΡΡΠ΅.
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ
CSS ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ:
word-spacing:"normal | length | initial | inherit";
JavaScript ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ:
object.style.wordSpacing = "22px"
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
normal | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΎΠ±ΡΠ΅ΠΏΡΠΈΠ½ΡΡΡΠΉ ΠΏΡΠΎΠ±Π΅Π» ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ (Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ — 0.25em). ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
length | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ Π² Π΅Π΄ΠΈΠ½ΠΈΡΠ°Ρ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ CSS (px, pt, cm, em, ΠΈ Ρ.Π΄.). ΠΠΎΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ. |
initial | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
inherit | Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
ΠΠ΅ΡΡΠΈΡ CSS
CSS1ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ
ΠΠ°.ΠΠ½ΠΈΠΌΠΈΡΡΠ΅ΠΌΠΎΠ΅
ΠΠ°.ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ
<!DOCTYPE html> <html> <head> <title>ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° word-spacing.</title> <style> .test { word-spacing : normal; /* ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ (Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ) */ } .test2 { word-spacing : 15px; /* ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ (15 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) */ } .test3 { word-spacing : -5px; /* ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ (ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅) */ } </style> </head> <body> <p class = "test">Π‘ΡΠ΅ΡΡ ΠΆΠ΅ Π΅ΡΡ ΡΡΠΈΡ ΠΌΡΠ³ΠΊΠΈΡ ΡΡΠ°Π½ΡΡΠ·ΡΠΊΠΈΡ Π±ΡΠ»ΠΎΠΊ Π΄Π° Π²ΡΠΏΠ΅ΠΉ ΡΠ°Ρ. Π‘ΡΠ΅ΡΡ ΠΆΠ΅ Π΅ΡΡ ΡΡΠΈΡ ΠΌΡΠ³ΠΊΠΈΡ ΡΡΠ°Π½ΡΡΠ·ΡΠΊΠΈΡ Π±ΡΠ»ΠΎΠΊ Π΄Π° Π²ΡΠΏΠ΅ΠΉ ΡΠ°Ρ. Π‘ΡΠ΅ΡΡ ΠΆΠ΅ Π΅ΡΡ ΡΡΠΈΡ ΠΌΡΠ³ΠΊΠΈΡ ΡΡΠ°Π½ΡΡΠ·ΡΠΊΠΈΡ Π±ΡΠ»ΠΎΠΊ Π΄Π° Π²ΡΠΏΠ΅ΠΉ ΡΠ°Ρ. Π‘ΡΠ΅ΡΡ ΠΆΠ΅ Π΅ΡΡ ΡΡΠΈΡ ΠΌΡΠ³ΠΊΠΈΡ ΡΡΠ°Π½ΡΡΠ·ΡΠΊΠΈΡ Π±ΡΠ»ΠΎΠΊ Π΄Π° Π²ΡΠΏΠ΅ΠΉ ΡΠ°Ρ.</p> <p class = "test2">Π‘ΡΠ΅ΡΡ ΠΆΠ΅ Π΅ΡΡ ΡΡΠΈΡ ΠΌΡΠ³ΠΊΠΈΡ ΡΡΠ°Π½ΡΡΠ·ΡΠΊΠΈΡ Π±ΡΠ»ΠΎΠΊ Π΄Π° Π²ΡΠΏΠ΅ΠΉ ΡΠ°Ρ. Π‘ΡΠ΅ΡΡ ΠΆΠ΅ Π΅ΡΡ ΡΡΠΈΡ ΠΌΡΠ³ΠΊΠΈΡ ΡΡΠ°Π½ΡΡΠ·ΡΠΊΠΈΡ Π±ΡΠ»ΠΎΠΊ Π΄Π° Π²ΡΠΏΠ΅ΠΉ ΡΠ°Ρ. Π‘ΡΠ΅ΡΡ ΠΆΠ΅ Π΅ΡΡ ΡΡΠΈΡ ΠΌΡΠ³ΠΊΠΈΡ ΡΡΠ°Π½ΡΡΠ·ΡΠΊΠΈΡ Π±ΡΠ»ΠΎΠΊ Π΄Π° Π²ΡΠΏΠ΅ΠΉ ΡΠ°Ρ. Π‘ΡΠ΅ΡΡ ΠΆΠ΅ Π΅ΡΡ ΡΡΠΈΡ ΠΌΡΠ³ΠΊΠΈΡ ΡΡΠ°Π½ΡΡΠ·ΡΠΊΠΈΡ Π±ΡΠ»ΠΎΠΊ Π΄Π° Π²ΡΠΏΠ΅ΠΉ ΡΠ°Ρ.</p> <p class = "test3">Π‘ΡΠ΅ΡΡ ΠΆΠ΅ Π΅ΡΡ ΡΡΠΈΡ ΠΌΡΠ³ΠΊΠΈΡ ΡΡΠ°Π½ΡΡΠ·ΡΠΊΠΈΡ Π±ΡΠ»ΠΎΠΊ Π΄Π° Π²ΡΠΏΠ΅ΠΉ ΡΠ°Ρ. Π‘ΡΠ΅ΡΡ ΠΆΠ΅ Π΅ΡΡ ΡΡΠΈΡ ΠΌΡΠ³ΠΊΠΈΡ ΡΡΠ°Π½ΡΡΠ·ΡΠΊΠΈΡ Π±ΡΠ»ΠΎΠΊ Π΄Π° Π²ΡΠΏΠ΅ΠΉ ΡΠ°Ρ. Π‘ΡΠ΅ΡΡ ΠΆΠ΅ Π΅ΡΡ ΡΡΠΈΡ ΠΌΡΠ³ΠΊΠΈΡ ΡΡΠ°Π½ΡΡΠ·ΡΠΊΠΈΡ Π±ΡΠ»ΠΎΠΊ Π΄Π° Π²ΡΠΏΠ΅ΠΉ ΡΠ°Ρ. Π‘ΡΠ΅ΡΡ ΠΆΠ΅ Π΅ΡΡ ΡΡΠΈΡ ΠΌΡΠ³ΠΊΠΈΡ ΡΡΠ°Π½ΡΡΠ·ΡΠΊΠΈΡ Π±ΡΠ»ΠΎΠΊ Π΄Π° Π²ΡΠΏΠ΅ΠΉ ΡΠ°Ρ.</p> </body> </html>
CSS: ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠΎΠΊΠ°ΠΌΠΈ
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΏΡΠ°Π²Π»ΡΡΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ ΠΈ Π±ΡΠΊΠ²Π°ΠΌΠΈ, Π½ΠΎ ΠΈ ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΡΠΌ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»ΠΎΠΌ. ΠΠ°Π·Π°Π»ΠΎΡΡ Π±Ρ, Π² ΠΊΠ°ΠΊΠΈΡ ΡΠΈΡΡΠ°ΡΠΈΡΡ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ³ΠΎΠ΄ΠΈΡΡΡΡ ΡΠ°ΠΊΠ°Ρ ΡΠΎΠ½ΠΊΠ°Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠ°?
Π― ΡΡΠΈΡΠ°Ρ, ΡΡΠΎ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠΎΠΊΠ°ΠΌΠΈ Π²Ρ ΠΎΠ΄ΠΈΡ Π² Π’ΠΎΠΏ 10 ΡΠ°ΠΌΡΡ Π²Π°ΠΆΠ½ΡΡ Π½Π°ΡΡΡΠΎΠ΅ΠΊ Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ Π±Π»ΠΎΠ³Π°. Π‘Π²ΡΠ·Π°Π½ΠΎ ΡΡΠΎ Ρ ΡΠ΅ΠΌ, ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΠ±Π»Π΅Π³ΡΠΈΡΡ ΡΡΠ΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° Π½Π°ΡΠΈΠΌΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌΠΈ.
Π ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π΄ΠΎΡΠΎΠΆΠ΅ ΡΠ΄ΠΎΠ±ΡΡΠ²Π° ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ ΡΠ°ΠΉΡΠ°?
ΠΠΈΠ΄Π΅ΠΎΠ²Π΅ΡΡΠΈΡ:
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ line-height
ΠΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° line-height ΠΌΡ Π·Π°Π΄Π°Π΅ΠΌ ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π». ΠΠΎΠΎΠ±ΡΠ΅, ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈ Π²ΠΈΠ΄Π° ΡΡΠΈΡΡΠ°.
Π‘ΡΠΈΡΠ°Π΅ΡΡΡ, ΡΡΠΎ ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π», ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎ-Π΄ΡΡΠ³ΠΎΠΌΡ Π½Π°Π·ΡΠ²Π°ΡΡ ΠΈΠ½ΡΠ΅ΡΠ»ΠΈΠ½ΡΡΠΆ, ΡΠ°Π²Π½ΡΠ΅ΡΡΡ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ Π΄Π²ΡΠΌΡ Π±Π°Π·ΠΎΠ²ΡΠΌΠΈ Π»ΠΈΠ½ΠΈΡΠΌΠΈ ΡΠ΅ΠΊΡΡΠ°.
ΠΠ΅ΠΆΡΡΡΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»ΠΠ° ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ Π²ΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ Π²ΡΡΠΎΡΡ ΡΡΡΠΎΠΊΠΈ, ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°Π΅ΠΌΡΡ ΠΊΠ°ΠΊ line-height. ΠΠ΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ ΠΏΡΠΈΠ½ΡΡΠΎ Π½Π°Π·ΡΠ²Π°ΡΡ leading.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ ΠΌΡ Π·Π°Π΄Π°Π΄ΠΈΠΌ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠΎΠΊΠ°ΠΌΠΈ ΡΠ°Π²Π½ΠΎΠ΅ 24 ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌ, Π° ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° 16 ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌ, ΡΠΎ leading Ρ Π½Π°Ρ Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π½ΡΡΡΡΡ 8 ΠΏΠΈΠΊΡΠ΅Π»ΡΠΌ (24-16).
ΠΠΎΠΏΡΡΡΠΈΠΌΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΡΠ΅ ΡΠ΅ ΠΆΠ΅ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ, em ΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΡ, Ρ ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΠΌΡ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΠ»ΠΈΡΡ Π² ΡΡΠΎΠΊΠ΅ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΡΠΈΡΡΠΎΠ². ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» Π² 24 ΠΏΠΈΠΊΡΠ΅Π»Ρ.
body { line-height: 24px; }
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, Π²ΡΠ΅ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ. ΠΠ΄Π½Π°ΠΊΠΎ, Π² ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠΉ Π·Π°ΠΏΠΈΡΠΈ Π΅ΡΡΡ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΠΊ. ΠΠ°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ ΠΎΠ½ Π² ΡΠΎΠΌ, ΡΡΠΎ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠ΅ΠΊΡΡΠ° Π½ΡΠΆΠ½ΠΎ Π½Π΅ Π·Π°Π±ΡΡΡ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ»ΠΈΠ½ΡΡΠΆ.
ΠΠΎ-Π΄ΡΡΠ³ΠΎΠΌΡ ΠΎΠ±ΡΡΠΎΠΈΡ Π΄Π΅Π»ΠΎ Ρ ΠΏΡΠΎΡΠ΅Π½ΡΠ°ΠΌΠΈ ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ em, ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΡΡΡΠΈΡΡΠ²Π°ΡΡΡΡ ΠΈΡΡ ΠΎΠ΄Ρ ΠΈΠ· ΠΊΠ΅Π³Π»Ρ ΡΡΠΈΡΡΠ°. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ ΡΠΊΠ°Π·Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π² ΠΏΠΎΠ»ΡΠΎΡΠ° ΡΠ°Π·Π° Π±ΠΎΠ»ΡΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠ΅ΠΊΡΡΠ°. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΡΡΠ°Π·Ρ Π΄Π²ΡΠΌΡ ΠΏΠΎΠΊΠ°Π·Π°ΡΠ΅Π»ΡΠΌΠΈ.
body { line-height: 150%;
line-height: 1.5em; }
ΠΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²ΡΡΠ΅, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ ΠΏΡΠΎΡΠ΅Π½ΡΡ, ΡΠ°ΠΊ ΠΈ em. ΠΠ½ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΡΠ°Π²Π½ΠΎΠ·Π½Π°ΡΠ½Ρ.
ΠΡΡΡΠ΅Π΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅
Π’Π°ΠΊ ΠΊΠ°ΠΊ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ line-height Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ, Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ² ΠΈ Π΅Π΄ΠΈΠ½ΠΈΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ em Π΅ΡΡΡ ΡΠ²ΠΎΠΉ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΠΊ. ΠΠ°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ ΠΎΠ½ Π² ΡΠΎΠΌ, ΡΡΠΎ Π² ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ ΡΠ»ΡΡΠ°ΡΡ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ Π½Π΅ ΠΊΠΎΡΡΡΠΈΡΠΈΠ΅Π½Ρ Π²Π΅Π»ΠΈΡΠΈΠ½Ρ ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»Π° Π½Π°Π΄ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΡΡΠΈΡΡΠ°, Π° ΡΠ°ΠΌΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π°Π΄ΠΈΠΌ ΡΡΠΈΡΡΠ°ΠΌ ΡΠ΅Π³Π° body ΡΠ°Π·ΠΌΠ΅Ρ Π² 12 px, ΠΈ ΠΈΠ½ΡΠ΅ΡΠ»ΠΈΠ½ΡΡΠΆ Π² 150 ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ². ΠΠ½Π°ΡΠΈΡ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π½ΡΡΡΡΡ 18 ΠΏΠΈΠΊΡΠ΅Π»Ρ.
ΠΠ°Π»Π΅Π΅, ΠΏΠΎΠΌΠ΅Π½ΡΠ΅ΠΌ ΠΊΠ΅Π³Π»Ρ ΡΠ΅ΠΊΡΡΠ° Π² Π°Π±Π·Π°ΡΠ°Ρ Π½Π° 20 px. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» Π±ΡΠ΄Π΅Ρ Π½Π΅ 30 px (18*1.5), ΠΊΠ°ΠΊ ΠΎΠΆΠΈΠ΄Π°Π»ΠΎΡΡ, Π° ΠΎΡΡΠ°Π½Π΅ΡΡΡ 18 px, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ» ΡΠ½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ ΠΎΡ ΡΠ΅Π³Π° body.
ΠΠ½ΠΎΠΆΠΈΡΠ΅Π»Ρ
ΠΠ»Ρ Π·Π°Π΄Π°Π½ΠΈΡ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»Π° ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠΎΠΊΠ°ΠΌΠΈ Π»ΡΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ½ΠΎΠΆΠΈΡΠ΅Π»Ρ — ΠΏΡΠΎΡΡΠΎΠ΅ ΡΠΈΡΠ»ΠΎΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅, ΠΌΠ΅ΠΆΠ΄Ρ ΠΏΡΠΎΡΠΈΠΌ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ Π½Π°Π΄Π»Π΅ΠΆΠ°ΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ.
body { line-height: 1.5; }
Π Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅, ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΠΎΠ΅ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄Π΅Ρ Π² ΠΏΠΎΠ»ΡΠΎΡΠ° ΡΠ°Π·Π° Π±ΠΎΠ»ΡΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠ΅ΠΊΡΡΠ°. ΠΠ°ΠΆΠ΅ ΠΏΡΠΈ Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠΈ.
ΠΡΡ ΠΎΠ΄Ρ ΠΈΠ· ΡΡΠΎΠ³ΠΎ, Ρ ΡΠΎΠ²Π΅ΡΡΡ Π²Π°ΠΌ ΠΎΡΠ΄Π°ΡΡ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠ΅Π½ΠΈΠ΅ ΡΠΈΡΠ»ΠΎΠ²ΠΎΠΌΡ ΠΌΠ½ΠΎΠΆΠΈΡΠ΅Π»Ρ. Π’Π°ΠΊ Π²Ρ ΠΎΠ±Π΅Π·ΠΎΠΏΠ°ΡΠΈΡΠ΅ ΡΠ΅Π±Ρ ΠΎΡ Π½Π΅ΠΏΡΠ΅Π΄ΡΠΊΠ°Π·ΡΠ΅ΠΌΡΡ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΠ²ΠΈΠΉ, ΠΈ ΠΎΡΠ²ΠΎΠ±ΠΎΠ΄ΠΈΡΠ΅ ΠΎΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ ΠΏΠΎ ΡΠΌΠ΅Π½Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΠ²ΠΎΠΉΡΡΠ²Π° line-height, ΠΏΡΠΈ ΠΊΠΎΡΡΠ΅ΠΊΡΠΈΡΠΎΠ²ΠΊΠ΅ ΠΊΠ΅Π³Π»Ρ ΡΡΠΈΡΡΠ°.
Π Π½Π° ΡΡΠΎΠΌ Ρ ΠΌΠ΅Π½Ρ Π²ΡΠ΅. Π‘ΠΌΠ΅Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ ΡΡΠΎ Π²Π°ΠΌ Π²ΡΠ΅ ΠΏΠΎΠ½ΡΡΠ½ΠΎ, Π΅ΡΠ»ΠΈ Π½Π΅Ρ — Π·Π°Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ²ΠΎΠΈ Π²ΠΎΠΏΡΠΎΡΡ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ . ΠΠ°Π΄Π΅ΡΡΡ, Π΄Π°Π½Π½ΡΠΉ ΡΡΠΎΠΊ ΠΏΠΎ CSS Π±ΡΠ» Π΄Π»Ρ Π²Π°Ρ ΠΏΠΎΠ»Π΅Π·Π΅Π½. ΠΡΠ»ΠΈ ΡΡΠΎ ΡΠ°ΠΊ, ΡΠ΄Π΅Π»Π°ΠΉΡΠ΅ ΡΠ΅ΠΏΠΎΡΡ Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠΈΒ Π² ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠ΅ΡΡΡ , ΡΡΠΎΠ±Ρ Π±ΠΎΠ»ΡΡΠ΅ Π»ΡΠ΄Π΅ΠΉ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΈ ΠΎΡ Π½Π΅Π΅Β ΠΏΠΎΠ»ΡΠ·Ρ.
line-height — ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠΎΠΊΠ°ΠΌΠΈ
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ
12.0+ | 4.0+ | 1.0+ | 1.0+ | 7.0+ | 1.0+ |
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅
ΠΠ΅ΠΆΡΡΡΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» (ΠΈΠ½ΡΠ΅ΡΠ»ΠΈΠ½ΡΡΠΆ) — ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΡΠΊΠΈΠΉ ΡΠ΅ΡΠΌΠΈΠ½, ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°ΡΡΠΈΠΉ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠΎΠΊΠ°ΠΌΠΈ ΡΠ΅ΠΊΡΡΠ°. Π§Π°ΡΡΡ ΡΠΈΠΌΠ²ΠΎΠ»Π°, ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΠ°ΡΡΡ Π½ΠΈΠΆΠ΅ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ, Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ Π½ΠΈΠΆΠ½ΠΈΠΌ Π²ΡΠ½ΠΎΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ ΡΠ°ΠΌΠ°Ρ Π²ΡΡΠΎΠΊΠ°Ρ ΡΠΎΡΠΊΠ° ΡΠΈΠΌΠ²ΠΎΠ»Π° Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ Π²Π΅ΡΡ Π½ΠΈΠΌ Π²ΡΠ½ΠΎΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ. ΠΠ΅ΠΆΡΡΡΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» ΠΈΠ·ΠΌΠ΅ΡΡΠ΅ΡΡΡ ΠΎΡ Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ Π²ΡΠ½ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅ Π΄ΠΎ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ Π²ΡΠ½ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΡΡΠΎΠΊΠ΅.
Π CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ line-height
ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π²ΡΡΠΎΡΡ Π²ΡΠ΅ΠΉ ΡΡΡΠΎΠΊΠΈ ΡΠ΅ΠΊΡΡΠ°, ΠΏΠΎΡΡΠΎΠΌΡ ΡΠ°Π·Π½ΠΈΡΠ° ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΡΡΠΈΡΡΠ° (font-size) ΠΈ Π²ΡΡΠΎΡΠΎΠΉ ΡΡΡΠΎΠΊΠΈ (line-height
) ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΠΎΠΌΡ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»Ρ. Π£Π²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° line-height
ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠΎΠΊΠ°ΠΌΠΈ ΡΠ΅ΠΊΡΡΠ°.
Π£Π²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»Π° ΠΌΠΎΠΆΠ΅Ρ ΡΠ»ΡΡΡΠΈΡΡ ΡΠΈΡΠ°Π±Π΅Π»ΡΠ½ΠΎΡΡΡ ΡΠ΅ΠΊΡΡΠ°. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° Π½Π° ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ°ΡΡΠΈ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π²ΠΎ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» ΡΠ°Π²Π΅Π½ 120-125% ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΡΡΠΈΡΡΠ°. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π½Π΅ Π΄ΠΎΠΏΡΡΠΊΠ°Π΅ΡΡΡ.
ΠΠ»Ρ ΡΠ΅Π³ΡΠ»ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠΉ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ word-spacing, Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ Π±ΡΠΊΠ²Π°ΠΌΠΈ — letter-spacing.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: | normal |
---|---|
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ: | ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ |
ΠΠ½ΠΈΠΌΠΈΡΡΠ΅ΡΡΡ: | Π΄Π° |
ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ: | Π΄Π° |
ΠΠ΅ΡΡΠΈΡ: | CSS1 |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ JavaScript: | object.style.lineHeight=»2″ |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
line-height: normal|ΡΠΈΡΠ»ΠΎ|Π²ΡΡΠΎΡΠ°|inherit;
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
normal | Π‘ΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π». |
ΡΠΈΡΠ»ΠΎ | Π§ΠΈΡΠ»ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠΌΠ½ΠΎΠΆΠ΅Π½ΠΎ Π½Π° ΡΠ΅ΠΊΡΡΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»Π°. |
Π²ΡΡΠΎΡΠ° | ΠΡΡΠΎΡΠ° Π·Π°Π΄Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π΅Π΄ΠΈΠ½ΠΈΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ Π² CSS. |
% | ΠΡΡΠΎΡΠ° ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»Π° Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ ΠΎΡ ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ°. |
inherit | Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
ΠΡΠΈΠΌΠ΅Ρ
ΠΡΠΈΠΌΠ΅Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΠ΅Ρ, ΠΊΠ°ΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° line-height ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠΎΠΊ ΡΠ΅ΠΊΡΡΠ°.
div {
line-height: normal;
}