Π˜Π½Ρ‚Π΅Ρ€Π²Π°Π» ΠΌΠ΅ΠΆΠ΄Ρƒ словами css – «Как ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ строками Π² HTML?Β» – ЯндСкс.Π—Π½Π°Ρ‚ΠΎΠΊΠΈ

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

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).

ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ свойства word-spacing

Рис. 1. ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ свойства word-spacing

ΠžΠ±ΡŠΠ΅ΠΊΡ‚Π½Π°Ρ модСль

ΠžΠ±ΡŠΠ΅ΠΊΡ‚.style.wordSpacing

БпСцификация ?

БпСцификация

КаТдая спСцификация ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ нСсколько стадий одобрСния.

  • Recommendation (РСкомСндация) β€” спСцификация ΠΎΠ΄ΠΎΠ±Ρ€Π΅Π½Π° W3C ΠΈ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π½Π° ΠΊΠ°ΠΊ стандарт.
  • Candidate Recommendation (ВозмоТная рСкомСндация) β€” Π³Ρ€ΡƒΠΏΠΏΠ°, ΠΎΡ‚Π²Π΅Ρ‡Π°ΡŽΡ‰Π°Ρ Π·Π° стандарт, ΡƒΠ΄ΠΎΠ²Π»Π΅Ρ‚Π²ΠΎΡ€Π΅Π½Π°, ΠΊΠ°ΠΊ ΠΎΠ½ соотвСтствуСт своим цСлям, Π½ΠΎ трСбуСтся ΠΏΠΎΠΌΠΎΡ‰ΡŒ сообщСства Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΏΠΎ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ стандарта.
  • Proposed Recommendation (ΠŸΡ€Π΅Π΄Π»Π°Π³Π°Π΅ΠΌΠ°Ρ рСкомСндация) β€” Π½Π° этом этапС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ прСдставлСн Π½Π° рассмотрСниС ΠšΠΎΠ½ΡΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ совСта W3C для ΠΎΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ утвСрТдСния.
  • Working Draft (Π Π°Π±ΠΎΡ‡ΠΈΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚) β€” Π±ΠΎΠ»Π΅Π΅ зрСлая вСрсия Ρ‡Π΅Ρ€Π½ΠΎΠ²ΠΈΠΊΠ° послС обсуТдСния ΠΈ внСсСния ΠΏΠΎΠΏΡ€Π°Π²ΠΎΠΊ для рассмотрСния сообщСством.
  • Editor’s draft (РСдакторский Ρ‡Π΅Ρ€Π½ΠΎΠ²ΠΈΠΊ) β€” чСрновая вСрсия стандарта послС внСсСния ΠΏΡ€Π°Π²ΠΎΠΊ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°ΠΌΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.
  • Draft (Π§Π΅Ρ€Π½ΠΎΠ²ΠΈΠΊ спСцификации) β€” пСрвая чСрновая вСрсия стандарта.
Γ—

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹

Π’ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ обозначСния.

  • Β β€” свойство ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ поддСрТиваСтся Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ со всСми допустимыми значСниями;
  • Β β€” свойство Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ Π½Π΅ воспринимаСтся ΠΈ игнорируСтся;
  • Β β€” ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ появлСниС Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ошибок, Π»ΠΈΠ±ΠΎ свойство поддСрТиваСтся лишь частично, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π½Π΅ всС допустимыС значСния Π΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‚ ΠΈΠ»ΠΈ свойство примСняСтся Π½Π΅ ΠΊΠΎ всСм элСмСнтам, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠΊΠ°Π·Π°Π½Ρ‹ Π² спСцификации.

Число ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π²Π΅Ρ€ΡΠΈΡŽ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, начиная с ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ свойство поддСрТиваСтся.

Γ—

Автор ΠΈ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹

Автор: Π’Π»Π°Π΄ ΠœΠ΅Ρ€ΠΆΠ΅Π²ΠΈΡ‡

ПослСднСС измСнСниС: 29.08.2017

Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹: Π’Π»Π°Π΄ ΠœΠ΅Ρ€ΠΆΠ΅Π²ΠΈΡ‡

ΠšΡƒΡ€Ρ ΠΏΠΎ вёрсткС сайта Π½Π° CSS Grid

РасстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ словами (свойство 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. 1
  2. 2
  3. 3
  4. 4
  5. 5
  1. 1
  2. 2
  3. 3
  4. 4
  5. 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;

ЗначСния свойства

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ОписаниС
normal
ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ стандартноС пространство ΠΌΠ΅ΠΆΠ΄Ρƒ словами.
ΡˆΠΈΡ€ΠΈΠ½Π° ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ пространство ΠΌΠ΅ΠΆΠ΄Ρƒ словами с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π΅Π΄ΠΈΠ½ΠΈΡ† измСрСния, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… Π² 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 word-spacing.CSS свойства

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;
}

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *