ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» html ΠΊΠΎΠ΄
ΠΠ°ΠΊ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°ΡΡ Π°Π±Π·Π°Ρ Π² HTML?
ΠΠ°ΠΊ ΠΎΡΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°ΡΡ Π°Π±Π·Π°Ρ Π² HTML ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΈΠ»Π΅ΠΉ
ΠΠ°ΠΊ Π²ΡΡΠΎΠ²Π½ΡΡΡ ΡΠ΅ΠΊΡΡ Π² HTML
ΠΠΎΠΆΠ½ΠΎ Π²ΡΡΠΎΠ²Π½ΡΡΡ Π°Π±Π·Π°Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π°ΡΡΠΈΠ±ΡΡ align ΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ:
Π ΠΎΠΊΠ½Π΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ° HTML ΠΊΠΎΠ΄ Π°Π±Π·Π°ΡΠ° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ.
ΠΠ°ΠΊ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» HTML
ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ line-height Π΄Π»Ρ Π°ΡΡΠΈΠ±ΡΡΠ° style :
: Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» 13 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
: Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π² HTML ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ Π°Π±Π·Π°ΡΠ°ΠΌΠΈ Π² 200% ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ°;
: Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π²ΡΡΠΎΡΡ ΡΡΡΠΎΠΊΠΈ 14 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
ΠΡΡΡΡΠΏΡ
ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡΡΡ ΠΏΡΠΈΠΌΠ΅Ρ Π°Π±Π·Π°ΡΠ΅Π² Ρ ΠΎΡΡΡΡΠΏΠΎΠΌ ΡΠ»Π΅Π²Π° ΠΈ ΡΠΏΡΠ°Π²Π°:
ΠΡΡΡΡΠΏΡ ΠΌΠ΅ΠΆΠ΄Ρ Π°Π±Π·Π°ΡΠ°ΠΌΠΈ (ΠΎΡΡΡΡΠΏ ΠΏΠ΅ΡΠ΅Π΄ ΠΈ ΠΎΡΡΡΡΠΏ ΠΏΠΎΡΠ»Π΅ Π°Π±Π·Π°ΡΠ°)
Π HTML ΠΈΠ»ΠΈ CSS Π½Π°ΠΌ ΡΡΠΎ Π½Π΅ Π½ΡΠΆΠ½ΠΎ. ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΡΡΠΈΠ»Ρ padding Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
. padding-top ΠΈ padding-bottom Π·Π°Π΄Π°ΡΡ ΠΏΡΡΡΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π΄ΠΎ ΠΈ ΠΏΠΎΡΠ»Π΅ Π°Π±Π·Π°ΡΠ°, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, ΠΊΠ°ΠΊ ΠΎΡΡΡΡΠΏ ΡΠ²Π΅ΡΡ Ρ ΠΈΠ»ΠΈ ΡΠ½ΠΈΠ·Ρ. ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ΅Π³Π°
. Π― ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ» Π΄Π»Ρ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ Π°Π±Π·Π°ΡΠ° HTML ΠΎΡΡΡΡΠΏ 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΏΠ΅ΡΠ΅Π΄ Π²ΡΠΎΡΡΠΌ ΠΈ 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΏΠΎΡΠ»Π΅ Π²ΡΠΎΡΠΎΠ³ΠΎ Π°Π±Π·Π°ΡΠ°:
Π§ΡΠΎ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΠΎΠΌΠ½ΠΈΡΡ
ΠΠ°ΠΊ Π·Π°Π΄Π°ΡΡ ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» Π² 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 ΠΊΠΎΠ΄ Π°Π±Π·Π°ΡΠ° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ.
ΠΠ½ΡΠ΅ΡΠ²Π°Π»Ρ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠΎΠΊΠ°ΠΌΠΈ
ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ line-height Π΄Π»Ρ Π°ΡΡΠΈΠ±ΡΡΠ° style :
: Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» 13 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
: Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π² HTML ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ Π°Π±Π·Π°ΡΠ°ΠΌΠΈ Π² 200% ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ°;
: Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π²ΡΡΠΎΡΡ ΡΡΡΠΎΠΊΠΈ 14 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
ΠΡΡΡΡΠΏΡ
ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡΡΡ ΠΏΡΠΈΠΌΠ΅Ρ Π°Π±Π·Π°ΡΠ΅Π² Ρ ΠΎΡΡΡΡΠΏΠΎΠΌ ΡΠ»Π΅Π²Π° ΠΈ ΡΠΏΡΠ°Π²Π°:
ΠΡΡΡΡΠΏΡ ΠΌΠ΅ΠΆΠ΄Ρ Π°Π±Π·Π°ΡΠ°ΠΌΠΈ (ΠΎΡΡΡΡΠΏ ΠΏΠ΅ΡΠ΅Π΄ ΠΈ ΠΎΡΡΡΡΠΏ ΠΏΠΎΡΠ»Π΅ Π°Π±Π·Π°ΡΠ°)
Π HTML ΠΈΠ»ΠΈ CSS Π½Π°ΠΌ ΡΡΠΎ Π½Π΅ Π½ΡΠΆΠ½ΠΎ. ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΡΡΠΈΠ»Ρ padding Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
. padding-top ΠΈ padding-bottom Π·Π°Π΄Π°ΡΡ ΠΏΡΡΡΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π΄ΠΎ ΠΈ ΠΏΠΎΡΠ»Π΅ Π°Π±Π·Π°ΡΠ°, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, ΠΊΠ°ΠΊ ΠΎΡΡΡΡΠΏ ΡΠ²Π΅ΡΡ Ρ ΠΈΠ»ΠΈ ΡΠ½ΠΈΠ·Ρ. ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ΅Π³Π°
. Π― ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ» Π΄Π»Ρ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ Π°Π±Π·Π°ΡΠ° HTML ΠΎΡΡΡΡΠΏ 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΏΠ΅ΡΠ΅Π΄ Π²ΡΠΎΡΡΠΌ ΠΈ 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΏΠΎΡΠ»Π΅ Π²ΡΠΎΡΠΎΠ³ΠΎ Π°Π±Π·Π°ΡΠ°:
Π§ΡΠΎ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΠΎΠΌΠ½ΠΈΡΡ
ΠΡΠΈΠΌΠ΅Ρ 1. ΠΠ½ΡΠ΅ΡΠ»ΠΈΠ½ΡΡΠΆ Π² ΡΠ΅ΠΊΡΡΠ΅
HTML5 CSS 2.1 IE Cr Op Sa Fx
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΈΡ. 1.
Π ΠΈΡ. 1. ΠΠΈΠ΄ ΡΠ΅ΠΊΡΡΠ° ΠΏΡΠΈ ΡΠ°Π·Π½ΠΎΠΌ ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΠΎΠΌ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠΈ
html ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» css
Π€ΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ HTML-Π°Π±Π·Π°ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΈΠ»Π΅ΠΉ
ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π°Π±Π·Π°ΡΠ°
ΠΠΎΠΆΠ½ΠΎ Π²ΡΡΠΎΠ²Π½ΡΡΡ Π°Π±Π·Π°Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π°ΡΡΠΈΠ±ΡΡ align ΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ:
Π ΠΎΠΊΠ½Π΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ° HTML ΠΊΠΎΠ΄ Π°Π±Π·Π°ΡΠ° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ.
ΠΠ½ΡΠ΅ΡΠ²Π°Π»Ρ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠΎΠΊΠ°ΠΌΠΈ
ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ line-height Π΄Π»Ρ Π°ΡΡΠΈΠ±ΡΡΠ° style :
: Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» 13 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
: Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π² HTML ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ Π°Π±Π·Π°ΡΠ°ΠΌΠΈ Π² 200% ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ°;
: Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π²ΡΡΠΎΡΡ ΡΡΡΠΎΠΊΠΈ 14 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
ΠΡΡΡΡΠΏΡ
ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡΡΡ ΠΏΡΠΈΠΌΠ΅Ρ Π°Π±Π·Π°ΡΠ΅Π² Ρ ΠΎΡΡΡΡΠΏΠΎΠΌ ΡΠ»Π΅Π²Π° ΠΈ ΡΠΏΡΠ°Π²Π°:
ΠΡΡΡΡΠΏΡ ΠΌΠ΅ΠΆΠ΄Ρ Π°Π±Π·Π°ΡΠ°ΠΌΠΈ (ΠΎΡΡΡΡΠΏ ΠΏΠ΅ΡΠ΅Π΄ ΠΈ ΠΎΡΡΡΡΠΏ ΠΏΠΎΡΠ»Π΅ Π°Π±Π·Π°ΡΠ°)
Π HTML ΠΈΠ»ΠΈ CSS Π½Π°ΠΌ ΡΡΠΎ Π½Π΅ Π½ΡΠΆΠ½ΠΎ. ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΡΡΠΈΠ»Ρ padding Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
. padding-top ΠΈ padding-bottom Π·Π°Π΄Π°ΡΡ ΠΏΡΡΡΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π΄ΠΎ ΠΈ ΠΏΠΎΡΠ»Π΅ Π°Π±Π·Π°ΡΠ°, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, ΠΊΠ°ΠΊ ΠΎΡΡΡΡΠΏ ΡΠ²Π΅ΡΡ Ρ ΠΈΠ»ΠΈ ΡΠ½ΠΈΠ·Ρ. ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ΅Π³Π°
. Π― ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ» Π΄Π»Ρ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ Π°Π±Π·Π°ΡΠ° HTML ΠΎΡΡΡΡΠΏ 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΏΠ΅ΡΠ΅Π΄ Π²ΡΠΎΡΡΠΌ ΠΈ 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΏΠΎΡΠ»Π΅ Π²ΡΠΎΡΠΎΠ³ΠΎ Π°Π±Π·Π°ΡΠ°:
Π§ΡΠΎ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΠΎΠΌΠ½ΠΈΡΡ
ΠΡΠΈΠΌΠ΅Ρ 1. ΠΠ½ΡΠ΅ΡΠ»ΠΈΠ½ΡΡΠΆ Π² ΡΠ΅ΠΊΡΡΠ΅
HTML5 CSS 2.1 IE Cr Op Sa Fx
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΈΡ. 1.
Π ΠΈΡ. 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 Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
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.
Π ΠΈΡ. 1. ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° line-height
ΠΠ±ΡΠ΅ΠΊΡΠ½Π°Ρ ΠΌΠΎΠ΄Π΅Π»Ρ
[window.]document.getElementById(» elementID «).style.lineHeight
ΠΡΠ°ΡΠ·Π΅ΡΡ
CSS ΡΡΠΎΠΊ 17. ΠΠ½ΡΠ΅ΡΠ²Π°Π» ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠΎΠΊΠ°ΠΌΠΈ
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΏΡΠ°Π²Π»ΡΡΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ ΠΈ Π±ΡΠΊΠ²Π°ΠΌΠΈ, Π½ΠΎ ΠΈ ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΡΠΌ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»ΠΎΠΌ. ΠΠ°Π·Π°Π»ΠΎΡΡ Π±Ρ, Π² ΠΊΠ°ΠΊΠΈΡ ΡΠΈΡΡΠ°ΡΠΈΡΡ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ³ΠΎΠ΄ΠΈΡΡΡΡ ΡΠ°ΠΊΠ°Ρ ΡΠΎΠ½ΠΊΠ°Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠ°?
Π― ΡΡΠΈΡΠ°Ρ, ΡΡΠΎ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠΎΠΊΠ°ΠΌΠΈ Π²Ρ ΠΎΠ΄ΠΈΡ Π² Π’ΠΎΠΏ 10 ΡΠ°ΠΌΡΡ Π²Π°ΠΆΠ½ΡΡ Π½Π°ΡΡΡΠΎΠ΅ΠΊ Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ Π±Π»ΠΎΠ³Π°. Π‘Π²ΡΠ·Π°Π½ΠΎ ΡΡΠΎ Ρ ΡΠ΅ΠΌ, ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΠ±Π»Π΅Π³ΡΠΈΡΡ ΡΡΠ΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° Π½Π°ΡΠΈΠΌΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌΠΈ.
Π ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π΄ΠΎΡΠΎΠΆΠ΅ ΡΠ΄ΠΎΠ±ΡΡΠ²Π° ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ ΡΠ°ΠΉΡΠ°?
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ line-height
ΠΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° line-height ΠΌΡ Π·Π°Π΄Π°Π΅ΠΌ ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π». ΠΠΎΠΎΠ±ΡΠ΅, ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈ Π²ΠΈΠ΄Π° ΡΡΠΈΡΡΠ°.
Π‘ΡΠΈΡΠ°Π΅ΡΡΡ, ΡΡΠΎ ΠΌΠ΅ΠΆΡΡΡΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π», ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎ-Π΄ΡΡΠ³ΠΎΠΌΡ Π½Π°Π·ΡΠ²Π°ΡΡ ΠΈΠ½ΡΠ΅ΡΠ»ΠΈΠ½ΡΡΠΆ, ΡΠ°Π²Π½ΡΠ΅ΡΡΡ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ Π΄Π²ΡΠΌΡ Π±Π°Π·ΠΎΠ²ΡΠΌΠΈ Π»ΠΈΠ½ΠΈΡΠΌΠΈ ΡΠ΅ΠΊΡΡΠ°.
ΠΠ΅ΠΆΡΡΡΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»
ΠΠ° ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ Π²ΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ Π²ΡΡΠΎΡΡ ΡΡΡΠΎΠΊΠΈ, ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°Π΅ΠΌΡΡ ΠΊΠ°ΠΊ 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, ΠΏΡΠΈ ΠΊΠΎΡΡΠ΅ΠΊΡΠΈΡΠΎΠ²ΠΊΠ΅ ΠΊΠ΅Π³Π»Ρ ΡΡΠΈΡΡΠ°.