мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄

Как Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π°Π±Π·Π°Ρ† Π² HTML?

Как ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π°Π±Π·Π°Ρ† Π² HTML ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ стилСй

Как Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ тСкст Π² HTML

МоТно Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π°Π±Π·Π°Ρ†, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ align со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ значСниями:

Π’ ΠΎΠΊΠ½Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° HTML ΠΊΠΎΠ΄ Π°Π±Π·Π°Ρ†Π° выглядит ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ.

мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. paragraph alignment using 170218. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄-paragraph alignment using 170218. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° paragraph alignment using 170218. МоТно Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π°Π±Π·Π°Ρ†, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ align со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ значСниями:

Как Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» HTML

мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. line spacing html paragra 170219. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄-line spacing html paragra 170219. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° line spacing html paragra 170219. МоТно Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π°Π±Π·Π°Ρ†, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ align со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ значСниями:

НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ΠΎ нСсколько Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… способов использования значСния line-height для Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° style :

: УстанавливаСт мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» 13 пиксСлСй;

: УстанавливаСт Π² HTML расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ Π°Π±Π·Π°Ρ†Π°ΠΌΠΈ Π² 200% ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΡˆΡ€ΠΈΡ„Ρ‚Π°;

: УстанавливаСт высоту строки 14 пиксСлСй.

ΠžΡ‚ΡΡ‚ΡƒΠΏΡ‹

НиТС приводится ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π°Π±Π·Π°Ρ†Π΅Π² с отступом слСва ΠΈ справа:

мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. paragraph indentation in 171213. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄-paragraph indentation in 171213. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° paragraph indentation in 171213. МоТно Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π°Π±Π·Π°Ρ†, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ align со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ значСниями:

ΠžΡ‚ΡΡ‚ΡƒΠΏΡ‹ ΠΌΠ΅ΠΆΠ΄Ρƒ Π°Π±Π·Π°Ρ†Π°ΠΌΠΈ (отступ ΠΏΠ΅Ρ€Π΅Π΄ ΠΈ отступ послС Π°Π±Π·Π°Ρ†Π°)

Π’ HTML ΠΈΠ»ΠΈ CSS Π½Π°ΠΌ это Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ. ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ просто ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ padding для элСмСнта

. padding-top ΠΈ padding-bottom Π·Π°Π΄Π°ΡŽΡ‚ пустоС пространство Π΄ΠΎ ΠΈ послС Π°Π±Π·Π°Ρ†Π°, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, ΠΊΠ°ΠΊ отступ свСрху ΠΈΠ»ΠΈ снизу. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π½Π° ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚Π΅Π³Π°

. Π― установил для ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ Π°Π±Π·Π°Ρ†Π° HTML отступ 10 пиксСлСй ΠΏΠ΅Ρ€Π΅Π΄ Π²Ρ‚ΠΎΡ€Ρ‹ΠΌ ΠΈ 50 пиксСлСй послС Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ Π°Π±Π·Π°Ρ†Π°:

мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. paragraph spacing with st 171159. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄-paragraph spacing with st 171159. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° paragraph spacing with st 171159. МоТно Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π°Π±Π·Π°Ρ†, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ align со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ значСниями:

Π§Ρ‚ΠΎ слСдуСт ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Как Π·Π°Π΄Π°Ρ‚ΡŒ мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» Π² html

Высота строки CSS

Π§Π΅ΠΌ отличаСтся line-height ΠΎΡ‚ height ΠΈΠ»ΠΈ padding

padding – это отступ ΠΎΡ‚ height Π΄ΠΎ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ элСмСнта.

height: auto; (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ) β€” это

Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ line-height:
Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ height:

РасстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ строк HTML

line-height наслСдуСтся ΠΎΡ‚ ΠΏΡ€Π΅Π΄ΠΊΠ° ΠΊ ΠΏΠΎΡ‚ΠΎΠΌΠΊΡƒ

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Π·Π°Π΄Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΡ‚ΠΎΠΌΠΊΡƒ, Π±ΡƒΠ΄Π΅Ρ‚ Π³Π»Π°Π²Π½Π΅Π΅ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π·Π°Π΄Π°Π½ΠΎ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŽ.

Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ line-height Π—Π΅Π»Ρ‘Π½ΠΎΠ³ΠΎ ΠΏΠΎΡ‚ΠΎΠΌΠΊΠ°:
Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ line-height Π‘ΠΈΠ½Π΅Π³ΠΎ ΠΏΠΎΡ‚ΠΎΠΌΠΊΠ°:

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ СдинствСнноС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ отталкиваСтся ΠΎΡ‚ значСния font-size элСмСнта, Π° Π½Π΅ ΠΎΡ‚ Π΅Π³ΠΎ родитСля.

Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ line-height Π²

line-height ΠΈ HTML Ρ‚Π΅Π³ span

Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ line-height родитСля:
Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ line-height строчного ΠΏΠΎΡ‚ΠΎΠΌΠΊΠ°:

Π˜Π½Ρ‹ΠΌΠΈ словами, Ссли font-size строчного элСмСнта отличаСтся ΠΎΡ‚ font-size Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ, Ρ‚ΠΎ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ высоту строки родитСля, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΎΠ½ находится.

Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ line-height:
Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ font-size:

Π€ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ HTML-Π°Π±Π·Π°Ρ†Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ стилСй

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π°Π±Π·Π°Ρ†Π°

МоТно Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π°Π±Π·Π°Ρ†, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ align со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ значСниями:

Π’ ΠΎΠΊΠ½Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° HTML ΠΊΠΎΠ΄ Π°Π±Π·Π°Ρ†Π° выглядит ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ.

мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. paragraph alignment using 170218. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄-paragraph alignment using 170218. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° paragraph alignment using 170218. МоТно Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π°Π±Π·Π°Ρ†, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ align со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ значСниями:

Π˜Π½Ρ‚Π΅Ρ€Π²Π°Π»Ρ‹ ΠΌΠ΅ΠΆΠ΄Ρƒ строками

мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. line spacing html paragra 170219. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄-line spacing html paragra 170219. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° line spacing html paragra 170219. МоТно Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π°Π±Π·Π°Ρ†, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ align со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ значСниями:
НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ΠΎ нСсколько Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… способов использования значСния line-height для Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° style :

: УстанавливаСт мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» 13 пиксСлСй;

: УстанавливаСт Π² HTML расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ Π°Π±Π·Π°Ρ†Π°ΠΌΠΈ Π² 200% ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΡˆΡ€ΠΈΡ„Ρ‚Π°;

: УстанавливаСт высоту строки 14 пиксСлСй.

ΠžΡ‚ΡΡ‚ΡƒΠΏΡ‹

НиТС приводится ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π°Π±Π·Π°Ρ†Π΅Π² с отступом слСва ΠΈ справа:

мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. paragraph indentation in 171213. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄-paragraph indentation in 171213. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° paragraph indentation in 171213. МоТно Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π°Π±Π·Π°Ρ†, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ align со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ значСниями:

ΠžΡ‚ΡΡ‚ΡƒΠΏΡ‹ ΠΌΠ΅ΠΆΠ΄Ρƒ Π°Π±Π·Π°Ρ†Π°ΠΌΠΈ (отступ ΠΏΠ΅Ρ€Π΅Π΄ ΠΈ отступ послС Π°Π±Π·Π°Ρ†Π°)

Π’ HTML ΠΈΠ»ΠΈ CSS Π½Π°ΠΌ это Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ. ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ просто ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ padding для элСмСнта

. padding-top ΠΈ padding-bottom Π·Π°Π΄Π°ΡŽΡ‚ пустоС пространство Π΄ΠΎ ΠΈ послС Π°Π±Π·Π°Ρ†Π°, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, ΠΊΠ°ΠΊ отступ свСрху ΠΈΠ»ΠΈ снизу. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π½Π° ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚Π΅Π³Π°

. Π― установил для ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ Π°Π±Π·Π°Ρ†Π° HTML отступ 10 пиксСлСй ΠΏΠ΅Ρ€Π΅Π΄ Π²Ρ‚ΠΎΡ€Ρ‹ΠΌ ΠΈ 50 пиксСлСй послС Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ Π°Π±Π·Π°Ρ†Π°:

мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. paragraph spacing with st 171159. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄-paragraph spacing with st 171159. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° paragraph spacing with st 171159. МоТно Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π°Π±Π·Π°Ρ†, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ align со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ значСниями:

Π§Ρ‚ΠΎ слСдуСт ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ

мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. 1pepper. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄-1pepper. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° 1pepper. МоТно Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π°Π±Π·Π°Ρ†, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ align со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ значСниями:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 1. Π˜Π½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆ Π² тСкстС

HTML5 CSS 2.1 IE Cr Op Sa Fx

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° рис. 1.

мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. 31. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄-31. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° 31. МоТно Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π°Π±Π·Π°Ρ†, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ align со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ значСниями:

Рис. 1. Π’ΠΈΠ΄ тСкста ΠΏΡ€ΠΈ Ρ€Π°Π·Π½ΠΎΠΌ мСТстрочном расстоянии

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

html мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» css

Π€ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ HTML-Π°Π±Π·Π°Ρ†Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ стилСй

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π°Π±Π·Π°Ρ†Π°

МоТно Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π°Π±Π·Π°Ρ†, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ align со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ значСниями:

Π’ ΠΎΠΊΠ½Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° HTML ΠΊΠΎΠ΄ Π°Π±Π·Π°Ρ†Π° выглядит ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ.

мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. paragraph alignment using 170218. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄-paragraph alignment using 170218. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° paragraph alignment using 170218. МоТно Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π°Π±Π·Π°Ρ†, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ align со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ значСниями:

Π˜Π½Ρ‚Π΅Ρ€Π²Π°Π»Ρ‹ ΠΌΠ΅ΠΆΠ΄Ρƒ строками

мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. line spacing html paragra 170219. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄-line spacing html paragra 170219. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° line spacing html paragra 170219. МоТно Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π°Π±Π·Π°Ρ†, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ align со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ значСниями:
НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ΠΎ нСсколько Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… способов использования значСния line-height для Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° style :

: УстанавливаСт мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» 13 пиксСлСй;

: УстанавливаСт Π² HTML расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ Π°Π±Π·Π°Ρ†Π°ΠΌΠΈ Π² 200% ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΡˆΡ€ΠΈΡ„Ρ‚Π°;

: УстанавливаСт высоту строки 14 пиксСлСй.

ΠžΡ‚ΡΡ‚ΡƒΠΏΡ‹

НиТС приводится ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π°Π±Π·Π°Ρ†Π΅Π² с отступом слСва ΠΈ справа:

мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. paragraph indentation in 171213. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄-paragraph indentation in 171213. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° paragraph indentation in 171213. МоТно Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π°Π±Π·Π°Ρ†, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ align со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ значСниями:

ΠžΡ‚ΡΡ‚ΡƒΠΏΡ‹ ΠΌΠ΅ΠΆΠ΄Ρƒ Π°Π±Π·Π°Ρ†Π°ΠΌΠΈ (отступ ΠΏΠ΅Ρ€Π΅Π΄ ΠΈ отступ послС Π°Π±Π·Π°Ρ†Π°)

Π’ HTML ΠΈΠ»ΠΈ CSS Π½Π°ΠΌ это Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ. ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ просто ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ padding для элСмСнта

. padding-top ΠΈ padding-bottom Π·Π°Π΄Π°ΡŽΡ‚ пустоС пространство Π΄ΠΎ ΠΈ послС Π°Π±Π·Π°Ρ†Π°, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, ΠΊΠ°ΠΊ отступ свСрху ΠΈΠ»ΠΈ снизу. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π½Π° ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚Π΅Π³Π°

. Π― установил для ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ Π°Π±Π·Π°Ρ†Π° HTML отступ 10 пиксСлСй ΠΏΠ΅Ρ€Π΅Π΄ Π²Ρ‚ΠΎΡ€Ρ‹ΠΌ ΠΈ 50 пиксСлСй послС Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ Π°Π±Π·Π°Ρ†Π°:

мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. paragraph spacing with st 171159. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄-paragraph spacing with st 171159. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° paragraph spacing with st 171159. МоТно Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π°Π±Π·Π°Ρ†, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ align со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ значСниями:

Π§Ρ‚ΠΎ слСдуСт ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ

мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. 1pepper. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄-1pepper. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° 1pepper. МоТно Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π°Π±Π·Π°Ρ†, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ align со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ значСниями:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 1. Π˜Π½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆ Π² тСкстС

HTML5 CSS 2.1 IE Cr Op Sa Fx

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° рис. 1.

мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. 31. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄-31. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° 31. МоТно Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π°Π±Π·Π°Ρ†, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ align со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ значСниями:

Рис. 1. Π’ΠΈΠ΄ тСкста ΠΏΡ€ΠΈ Ρ€Π°Π·Π½ΠΎΠΌ мСТстрочном расстоянии

Высота строки CSS

Π§Π΅ΠΌ отличаСтся line-height ΠΎΡ‚ height ΠΈΠ»ΠΈ padding

padding β€” это отступ ΠΎΡ‚ height Π΄ΠΎ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ элСмСнта.

height: auto; (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ) β€” это

Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ line-height:
Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ height:

РасстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ строк HTML

line-height наслСдуСтся ΠΎΡ‚ ΠΏΡ€Π΅Π΄ΠΊΠ° ΠΊ ΠΏΠΎΡ‚ΠΎΠΌΠΊΡƒ

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Π·Π°Π΄Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΡ‚ΠΎΠΌΠΊΡƒ, Π±ΡƒΠ΄Π΅Ρ‚ Π³Π»Π°Π²Π½Π΅Π΅ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π·Π°Π΄Π°Π½ΠΎ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŽ.

Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ line-height Π—Π΅Π»Ρ‘Π½ΠΎΠ³ΠΎ ΠΏΠΎΡ‚ΠΎΠΌΠΊΠ°:
Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ line-height Π‘ΠΈΠ½Π΅Π³ΠΎ ΠΏΠΎΡ‚ΠΎΠΌΠΊΠ°:

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ СдинствСнноС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ отталкиваСтся ΠΎΡ‚ значСния font-size элСмСнта, Π° Π½Π΅ ΠΎΡ‚ Π΅Π³ΠΎ родитСля.

Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ line-height Π²

line-height ΠΈ HTML Ρ‚Π΅Π³ span

Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ line-height родитСля:
Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ line-height строчного ΠΏΠΎΡ‚ΠΎΠΌΠΊΠ°:

Π˜Π½Ρ‹ΠΌΠΈ словами, Ссли font-size строчного элСмСнта отличаСтся ΠΎΡ‚ font-size Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ, Ρ‚ΠΎ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ высоту строки родитСля, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΎΠ½ находится.

Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ line-height:
Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ font-size:

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

line-height

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

ΠšΡ€Π°Ρ‚ΠΊΠ°Ρ информация

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽnormal
НаслСдуСтсяДа
ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠ΅Ρ‚ΡΡΠšΠΎ всСм элСмСнтам
Бсылка Π½Π° ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡŽhttp://www.w3.org/TR/CSS21/visudet.html#propdef-line-height

ВСрсии CSS

ОписаниС

УстанавливаСт ΠΈΠ½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆ (мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π») тСкста, отсчСт вСдСтся ΠΎΡ‚ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ ΡˆΡ€ΠΈΡ„Ρ‚Π°. ΠŸΡ€ΠΈ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… ΠΎΠ±ΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΡΡ‚Π²Π°Ρ… расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ строками зависит ΠΎΡ‚ Π²ΠΈΠ΄Π° ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈ опрСдСляСтся Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ автоматичСски. ΠžΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ мСТстрочного расстояния Π½Π΅ допускаСтся.

Бинтаксис

line-height: ΠΌΠ½ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒ | Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ | ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Ρ‹ | normal | inherit

ЗначСния

Π›ΡŽΠ±ΠΎΠ΅ число большС нуля воспринимаСтся ΠΊΠ°ΠΊ ΠΌΠ½ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒ ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΡˆΡ€ΠΈΡ„Ρ‚Π° Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π³ΠΎ тСкста. НапримСр, Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 1.5 устанавливаСт ΠΏΠΎΠ»ΡƒΡ‚ΠΎΡ€Π½Ρ‹ΠΉ мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π». Π’ качСствС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°ΡŽΡ‚ΡΡ Ρ‚Π°ΠΊΠΆΠ΅ Π»ΡŽΠ±Ρ‹Π΅ Π΅Π΄ΠΈΠ½ΠΈΡ†Ρ‹ Π΄Π»ΠΈΠ½Ρ‹, принятыС Π² CSS β€” пиксСлы (px), Π΄ΡŽΠΉΠΌΡ‹ (in), ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ (pt) ΠΈ Π΄Ρ€. Π Π°Π·Ρ€Π΅ΡˆΠ°Π΅Ρ‚ΡΡ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π½ΡƒΡŽ запись, Π² этом случаС Π·Π° 100% бСрСтся высота ΡˆΡ€ΠΈΡ„Ρ‚Π°.

normal РасстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ строк вычисляСтся автоматичСски. inherit НаслСдуСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ родитСля.

HTML5 CSS2.1 IE Cr Op Sa Fx

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° рис. 1.

мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. css line height. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄-css line height. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css line height. МоТно Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π°Π±Π·Π°Ρ†, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ align со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ значСниями:

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

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

[window.]document.getElementById(» elementID «).style.lineHeight

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

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

CSS ΡƒΡ€ΠΎΠΊ 17. Π˜Π½Ρ‚Π΅Ρ€Π²Π°Π» ΠΌΠ΅ΠΆΠ΄Ρƒ строками

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ расстояниСм ΠΌΠ΅ΠΆΠ΄Ρƒ словами ΠΈ Π±ΡƒΠΊΠ²Π°ΠΌΠΈ, Π½ΠΎ ΠΈ мСТстрочным ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»ΠΎΠΌ. Казалось Π±Ρ‹, Π² ΠΊΠ°ΠΊΠΈΡ… ситуациях ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠ³ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ такая тонкая настройка?

Π― ΡΡ‡ΠΈΡ‚Π°ΡŽ, Ρ‡Ρ‚ΠΎ ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ расстояниСм ΠΌΠ΅ΠΆΠ΄Ρƒ строками Π²Ρ…ΠΎΠ΄ΠΈΡ‚ Π² Π’ΠΎΠΏ 10 самых Π²Π°ΠΆΠ½Ρ‹Ρ… настроСк для любого Π±Π»ΠΎΠ³Π°. Бвязано это с Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ эту Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΠ±Π»Π΅Π³Ρ‡ΠΈΡ‚ΡŒ Ρ‡Ρ‚Π΅Π½ΠΈΠ΅ тСкста нашими ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌΠΈ.

А Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π΄ΠΎΡ€ΠΎΠΆΠ΅ удобства посСтитСля сайта?

Бвойство line-height

ΠŸΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ свойства line-height ΠΌΡ‹ Π·Π°Π΄Π°Π΅ΠΌ мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π». Π’ΠΎΠΎΠ±Ρ‰Π΅, это Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ отсчитываСтся Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ автоматичСски, Π² зависимости ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΈ Π²ΠΈΠ΄Π° ΡˆΡ€ΠΈΡ„Ρ‚Π°.

БчитаСтся, Ρ‡Ρ‚ΠΎ мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎ-Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΈΠ½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆ, равняСтся Ρ€Π°ΡΡΡ‚ΠΎΡΠ½ΠΈΡŽ ΠΌΠ΅ΠΆΠ΄Ρƒ двумя Π±Π°Π·ΠΎΠ²Ρ‹ΠΌΠΈ линиями тСкста.

мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. CSS mezhstrochnyj interval. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎ. мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄-CSS mezhstrochnyj interval. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» html ΠΊΠΎΠ΄. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° CSS mezhstrochnyj interval. МоТно Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π°Π±Π·Π°Ρ†, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ align со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ значСниями:ΠœΠ΅ΠΆΡΡ‚Ρ€ΠΎΡ‡Π½Ρ‹ΠΉ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»

На ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ Π²Ρ‹ΡˆΠ΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ высоту строки, ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°Π΅ΠΌΡƒΡŽ ΠΊΠ°ΠΊ line-height. НСпосрСдствСнноС расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ принято Π½Π°Π·Ρ‹Π²Π°Ρ‚ΡŒ leading.

НапримСр, Ссли ΠΌΡ‹ Π·Π°Π΄Π°Π΄ΠΈΠΌ расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ строками Ρ€Π°Π²Π½ΠΎΠ΅ 24 пиксСлям, Π° Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° 16 пиксСлям, Ρ‚ΠΎ leading Ρƒ нас Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π²Π½ΡΡ‚ΡŒΡΡ 8 пиксСлям (24-16).

ДопустимыС значСния

Π’ качСствС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ всС Ρ‚Π΅ ΠΆΠ΅ пиксСли, em ΠΈ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Ρ‹, с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ ΠΌΡ‹ познакомились Π² ΡƒΡ€ΠΎΠΊΠ΅ ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ². НапримСр, Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» Π² 24 пиксСля.

Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, всС довольно просто. Однако, Π² ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠΉ записи Π΅ΡΡ‚ΡŒ нСдостаток. Π—Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ ΠΎΠ½ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° тСкста Π½ΡƒΠΆΠ½ΠΎ Π½Π΅ Π·Π°Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆ.

По-Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ обстоит Π΄Π΅Π»ΠΎ с ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°ΠΌΠΈ ΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ em, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ΡΡ‡ΠΈΡ‚Ρ‹Π²Π°ΡŽΡ‚ΡΡ исходя ΠΈΠ· кСгля ΡˆΡ€ΠΈΡ„Ρ‚Π°. Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² ΠΏΠΎΠ»Ρ‚ΠΎΡ€Π° Ρ€Π°Π·Π° большС Ρ€Π°Π·ΠΌΠ΅Ρ€Π° тСкста. Для этого Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡΡ сразу двумя показатСлями.

Как Π²ΠΈΠ΄Π½ΠΎ Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π²Ρ‹ΡˆΠ΅, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Ρ‹, Ρ‚Π°ΠΊ ΠΈ em. Они Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ Ρ€Π°Π²Π½ΠΎΠ·Π½Π°Ρ‡Π½Ρ‹.

Π›ΡƒΡ‡ΡˆΠ΅Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅

Π’Π°ΠΊ ΠΊΠ°ΠΊ свойство line-height наслСдуСтся, Π² использовании ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ΠΎΠ² ΠΈ Π΅Π΄ΠΈΠ½ΠΈΡ† измСрСния em Π΅ΡΡ‚ΡŒ свой нСдостаток. Π—Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ ΠΎΠ½ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π² ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Ρ… случаях наслСдуСтся Π½Π΅ коэффициСнт Π²Π΅Π»ΠΈΡ‡ΠΈΠ½Ρ‹ мСТстрочного ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Π° Π½Π°Π΄ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ ΡˆΡ€ΠΈΡ„Ρ‚Π°, Π° само Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.

НапримСр, Π΄Π°Π΄ΠΈΠΌ ΡˆΡ€ΠΈΡ„Ρ‚Π°ΠΌ Ρ‚Π΅Π³Π° body Ρ€Π°Π·ΠΌΠ΅Ρ€ Π² 12 px, ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆ Π² 150 ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ΠΎΠ². Π—Π½Π°Ρ‡ΠΈΡ‚, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π²Π½ΡΡ‚ΡŒΡΡ 18 пиксСлю.

Π”Π°Π»Π΅Π΅, помСняСм кСгль тСкста Π² Π°Π±Π·Π°Ρ†Π°Ρ… Π½Π° 20 px. Π’ этом случаС, мСТстрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» Π±ΡƒΠ΄Π΅Ρ‚ Π½Π΅ 30 px (18*1.5), ΠΊΠ°ΠΊ оТидалось, Π° останСтся 18 px, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±Ρ‹Π» унаслСдован ΠΎΡ‚ Ρ‚Π΅Π³Π° body.

ΠœΠ½ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒ

Π’ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅, мСТстрочноС расстояниС всСгда Π±ΡƒΠ΄Π΅Ρ‚ Π² ΠΏΠΎΠ»Ρ‚ΠΎΡ€Π° Ρ€Π°Π·Π° большС Ρ€Π°Π·ΠΌΠ΅Ρ€Π° тСкста. Π”Π°ΠΆΠ΅ ΠΏΡ€ΠΈ наслСдовании.

Π˜ΡΡ…ΠΎΠ΄Ρ ΠΈΠ· этого, я ΡΠΎΠ²Π΅Ρ‚ΡƒΡŽ Π²Π°ΠΌ ΠΎΡ‚Π΄Π°Ρ‚ΡŒ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚Π΅Π½ΠΈΠ΅ числовому ΠΌΠ½ΠΎΠΆΠΈΡ‚Π΅Π»ΡŽ. Π’Π°ΠΊ Π²Ρ‹ обСзопаситС сСбя ΠΎΡ‚ нСпрСдсказуСмых послСдствий, ΠΈ освободитС ΠΎΡ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΏΠΎ смСнС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ свойства line-height, ΠΏΡ€ΠΈ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²ΠΊΠ΅ кСгля ΡˆΡ€ΠΈΡ„Ρ‚Π°.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

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

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