Π§ΠΈΡ‚Π°ΠΉΡ‚Π΅ ΠΊΠ½ΠΈΠ³ΠΈ ΠΎΠ½Π»Π°ΠΉΠ½ Π½Π° Bookidrom.ru! БСсплатныС ΠΊΠ½ΠΈΠ³ΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠ»ΠΈΠΊΠ΅

Π§ΠΈΡ‚Π°Ρ‚ΡŒ ΠΎΠ½Π»Π°ΠΉΠ½ «БпСцификация CSS2Β». Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π° 17

Автор Π•Π²Π³Π΅Π½ΠΈΠΉ Π Π΅Π·Π½ΠΈΡ‡Π΅Π½ΠΊΠΎ

border edge/ΠΊΡ€Π°ΠΉ Ρ€Π°ΠΌΠΊΠΈ

ΠžΠΊΡ€ΡƒΠΆΠ°Π΅Ρ‚ Ρ€Π°ΠΌΠΊΡƒ бокса . Если Ρ€Π°ΠΌΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ 0, Ρ‚ΠΎ ΠΊΡ€Π°ΠΉ Ρ€Π°ΠΌΠΊΠΈ - это Ρ‚ΠΎ ΠΆΠ΅, Ρ‡Ρ‚ΠΎ ΠΈ ΠΊΡ€Π°ΠΉ заполнСния.

margin edge/ΠΊΡ€Π°ΠΉ поля ΠΈΠ»ΠΈ outer edge/внСшний ΠΊΡ€Π°ΠΉ

ΠžΠΊΡ€ΡƒΠΆΠ°Π΅Ρ‚ ΠΏΠΎΠ»Π΅ бокса. Если ΠΏΠΎΠ»Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ 0, Ρ‚ΠΎ ΠΊΡ€Π°ΠΉ поля - Ρ‚ΠΎΡ‚ ΠΆΠ΅, Ρ‡Ρ‚ΠΎ ΠΈ ΠΊΡ€Π°ΠΉ Ρ€Π°ΠΌΠΊΠΈ.

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΊΡ€Π°ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π·ΠΎΡ€Π²Π°Π½ слСва, справа, Π²Π²Π΅Ρ€Ρ…Ρƒ ΠΈ Π²Π½ΠΈΠ·Ρƒ.

Π Π°Π·ΠΌΠ΅Ρ€Ρ‹ области содСрТимого бокса - ΡˆΠΈΡ€ΠΈΠ½Π° содСрТимого ΠΈ высота содСрТимого - зависят ΠΎΡ‚ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ„Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ²: ΠΈΠΌΠ΅Π΅Ρ‚ Π»ΠΈ элСмСнт, Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ бокс, установлСнныС свойства 'width' ΠΈΠ»ΠΈ 'height', содСрТит Π»ΠΈ бокс тСкст ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ боксы, являСтся Π»ΠΈ бокс Ρ‚Π°Π±Π»ΠΈΡ†Π΅ΠΉ ΠΈ Ρ‚.Π΄. Π¨ΠΈΡ€ΠΈΠ½Π° ΠΈ высота бокса ΠΎΠ±ΡΡƒΠΆΠ΄Π°ΡŽΡ‚ΡΡ Π² Π³Π»Π°Π²Π΅ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π΅Ρ‚Π°Π»ΠΈ ΠΌΠΎΠ΄Π΅Π»ΠΈ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ форматирования.

Π¨ΠΈΡ€ΠΈΠ½Π° бокса выводится ΠΊΠ°ΠΊ сумма Π»Π΅Π²ΠΎΠ³ΠΎ ΠΈ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ поля, Ρ€Π°ΠΌΠΊΠΈ, заполнСния ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ содСрТимого. Высота выводится ΠΊΠ°ΠΊ сумма Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ ΠΈ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ поля, Ρ€Π°ΠΌΠΊΠΈ, заполнСния ΠΈ высоты содСрТимого.

Π‘Ρ‚ΠΈΠ»ΡŒ Ρ„ΠΎΠ½Π° Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… областСй бокса опрСдСляСтся Ρ‚Π°ΠΊ:

[x]. ΠžΠ±Π»Π°ΡΡ‚ΡŒ содСрТимого: свойство 'background' Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΡŽΡ‰Π΅Π³ΠΎ элСмСнта.

[x]. ΠžΠ±Π»Π°ΡΡ‚ΡŒ заполнСния: свойство 'background' Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΡŽΡ‰Π΅Π³ΠΎ элСмСнта.

[x]. ΠžΠ±Π»Π°ΡΡ‚ΡŒ Ρ€Π°ΠΌΠΊΠΈ: свойства Ρ€Π°ΠΌΠΊΠΈ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΡŽΡ‰Π΅Π³ΠΎ элСмСнта.

[x]. ΠžΠ±Π»Π°ΡΡ‚ΡŒ поля: поля всСгда ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹.

Π­Ρ‚ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° HTML ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, ΠΊΠ°ΠΊ поля, Ρ€Π°ΠΌΠΊΠΈ ΠΈ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‚:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΠ»Π΅ΠΉ, заполнСния ΠΈ Ρ€Π°ΠΌΠΎΠΊ</TITLE> <STYLE type="text/css"> UL { background: green; margin: 12px 12px 12px 12px; padding: 3px 3px 3px 3px; /* Π Π°ΠΌΠΊΠΈ Π½Π΅ установлСны */ } LI { color: black; /* Ρ†Π²Π΅Ρ‚ тСкста - Ρ‡Ρ‘Ρ€Π½Ρ‹ΠΉ */ background: gray; /* Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅, Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ сСрым */ margin: 12px 12px 12px 12px; padding: 12px 0px 12px 12px; /* Π—Π°ΠΌΠ΅Ρ‚ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ справа 0px */ list-style: none /* ΠΏΠ΅Ρ€Π΅Π΄ элСмСнтом списка Π½Π΅Ρ‚ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… Π³Π»ΠΈΡ„ΠΎΠ² */ /* Π Π°ΠΌΠΊΠΈ Π½Π΅ установлСны */ } LI.withborder { border-style: dashed; border-width: medium; /* устанавливаСт ΡˆΠΈΡ€ΠΈΠ½Ρƒ Ρ€Π°ΠΌΠΎΠΊ всСх сторон */ border-color: black; } </STYLE> </HEAD> <BODY> <UL> <LI>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт списка <LI class="withborder">Π’Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт списка Π΄Π»ΠΈΠ½Π½Π΅Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ пСрСнос. </UL> </BODY> </HTML>


ΠΈ Π΄Π°Ρ‘Ρ‚ Π΄Π΅Ρ€Π΅Π²ΠΎ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° с (ΠΏΠΎΠΌΠΈΠΌΠΎ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΉ) элСмСнтом UL, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π΅ΡΡ‚ΡŒ Π΄Π²Π° Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… LI.

ΠŸΠ΅Ρ€Π²Π°Ρ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ° ΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚, Ρ‡Ρ‚ΠΎ этот ΠΏΡ€ΠΈΠΌΠ΅Ρ€ даст Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅. Вторая ΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ Π²Π·Π°ΠΈΠΌΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρƒ полями, Ρ€Π°ΠΌΠΊΠ°ΠΌΠΈ ΠΈ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ элСмСнтов UL ΠΈ LI.

[D]

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ:

[x]. Π¨ΠΈΡ€ΠΈΠ½Π° содСрТимого ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ бокса LI вычисляСтся свСрху Π²Π½ΠΈΠ·; содСрТащий Π±Π»ΠΎΠΊ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ бокса LI устанавливаСтся элСмСнтом UL.

[x]. Высота ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ бокса LI задаётся высотой содСрТимого плюс Π²Π΅Ρ€Ρ…Π½Π΅Π΅ ΠΈ Π½ΠΈΠΆΠ½Π΅Π΅ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅, Ρ€Π°ΠΌΠΊΠΈ ΠΈ поля. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ поля ΠΌΠ΅ΠΆΠ΄Ρƒ боксами LI сТаты.

[x]. ΠŸΡ€Π°Π²ΠΎΠ΅ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ боксов LI Π±Ρ‹Π»ΠΎ установлСно ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 0 (свойство 'padding'). Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π²ΠΈΠ΄Π΅Π½ Π½Π° Π²Ρ‚ΠΎΡ€ΠΎΠΉ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ.

[x]. Поля боксов LI ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ - поля всСгда ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ - Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° (Π·Π΅Π»Ρ‘Π½Ρ‹ΠΉ) заполнСния ΠΈ области содСрТимого UL просвСчиваСт сквозь Π½Π΅Π³ΠΎ.

[x]. Π’Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт LI спСцифицируСт ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΡƒΡŽ Ρ€Π°ΠΌΠΊΡƒ (свойство 'border-style').

Бвойства поля ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΡ†ΠΈΡ€ΡƒΡŽΡ‚ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΏΠΎΠ»Π΅ΠΉ бокса. Π‘ΠΎΠΊΡ€Π°Ρ‰Ρ‘Π½Π½ΠΎΠ΅ свойство 'margin' устанавливаСт ΠΏΠΎΠ»Π΅ для всСх Ρ‡Π΅Ρ‚Ρ‹Ρ€Ρ‘Ρ… сторон, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ свойства ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ стороны.

Бвойства, ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹Π΅ Π² этом Ρ€Π°Π·Π΄Π΅Π»Π΅, относятся ΠΊ Ρ‚ΠΈΠΏΡƒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ <margin-width>, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π²:

<length>

Π‘ΠΏΠ΅Ρ†ΠΈΡ„ΠΈΡ†ΠΈΡ€ΡƒΠ΅Ρ‚ Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ.

<percentage>

ΠŸΡ€ΠΎΡ†Π΅Π½Ρ‚Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ высчитываСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ содСрТащСго Π±Π»ΠΎΠΊΠ° сгСнСрированного бокса. Π­Ρ‚ΠΎ Π²Π΅Ρ€Π½ΠΎ для 'margin-top' ΠΈ 'margin-bottom' Π²Π΅Π·Π΄Π΅, ΠΊΡ€ΠΎΠΌΠ΅ контСкста страницы, Π³Π΄Π΅ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π½Ρ‹Π΅ значСния относятся ΠΊ высотС бокса страницы.

auto

Π‘ΠΌ. расчёт ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ ΠΏΠΎΠ»Π΅ΠΉ.

НСгативныС значСния свойств ΠΏΠΎΠ»Π΅ΠΉ Π΄ΠΎΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ, Π½ΠΎ ΠΌΠΎΠ³ΡƒΡ‚ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ограничСния, спСцифичныС для ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Ρ… Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΉ.

'margin-top', 'margin-right', 'margin-bottom', 'margin-left'

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅: <margin-width> | inherit

ΠΠ°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅: 0

ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠ΅Ρ‚ΡΡ: ΠΊΠΎ всСм элСмСнтам

НаслСдуСтся: Π½Π΅Ρ‚

ΠŸΡ€ΠΎΡ†Π΅Π½Ρ‚Π½ΠΎΠ΅: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ содСрТащСго Π±Π»ΠΎΠΊΠ°

ΠΠΎΡΠΈΡ‚Π΅Π»ΡŒ: Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ

Π­Ρ‚ΠΎ свойство устанавливаСт Π²Π΅Ρ€Ρ…Π½Π΅Π΅, Π½ΠΈΠΆΠ½Π΅Π΅, ΠΏΡ€Π°Π²ΠΎΠ΅ ΠΈ Π»Π΅Π²ΠΎΠ΅ поля бокса.


H1 { margin-top: 2em }


'margin'

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅: <margin-width>{1,4} | inherit

ΠΠ°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅: Π½Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ для сокращённого свойства

ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠ΅Ρ‚ΡΡ: ΠΊΠΎ всСм элСмСнтам

НаслСдуСтся: Π½Π΅Ρ‚

ΠŸΡ€ΠΎΡ†Π΅Π½Ρ‚Π½ΠΎΠ΅: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ содСрТащСго Π±Π»ΠΎΠΊΠ°

ΠΠΎΡΠΈΡ‚Π΅Π»ΡŒ: Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ

'margin' - это сокращённоС свойство для установки Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ 'margin-top', 'margin-right', 'margin-bottom' ΠΈ 'margin-left' Π² ΠΎΠ΄Π½ΠΎΠΌ мСстС Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ стилСй.

Если имССтся ΠΎΠ΄Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Ρ‚ΠΎ ΠΎΠ½ΠΎ примСняСтся ΠΊΠΎ всСм сторонам. Если Π΄Π°Π½ΠΎ Π΄Π²Π° значСния, Π²Π΅Ρ€Ρ…Π½Π΅Π΅ ΠΈ Π½ΠΈΠΆΠ½Π΅Π΅ поля ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π² ΠΏΠ΅Ρ€Π²ΠΎΠ΅, Π° ΠΏΡ€Π°Π²ΠΎΠ΅ ΠΈ Π»Π΅Π²ΠΎΠ΅ поля - Π²ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. Если Π΄Π°Π½ΠΎ Ρ‚Ρ€ΠΈ значСния, Π²Π΅Ρ€Ρ…Π½Π΅Π΅ ΠΏΠΎΠ»Π΅ устанавливаСтся Π² ΠΏΠ΅Ρ€Π²ΠΎΠ΅, Π»Π΅Π²ΠΎΠ΅ ΠΈ ΠΏΡ€Π°Π²ΠΎΠ΅ - Π²ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠ΅, Π° Π½ΠΈΠΆΠ½Π΅Π΅ ΠΏΠΎΠ»Π΅ - Π² Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. Если Π·Π°Π΄Π°Π½ΠΎ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ значСния, ΠΎΠ½ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΊ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌΡƒ, ΠΏΡ€Π°Π²ΠΎΠΌΡƒ, Π½ΠΈΠΆΠ½Π΅ΠΌΡƒ ΠΈ Π»Π΅Π²ΠΎΠΌΡƒ полям соотвСтствСнно.


BODY { margin: 2em } /* всС поля установлСны Π² 2em */ BODY { margin: 1em 2em } /* Π²Π΅Ρ€Ρ…Π½Π΅Π΅ ΠΈ Π½ΠΈΠΆΠ½Π΅Π΅ = 1em, ΠΏΡ€Π°Π²ΠΎΠ΅ ΠΈ Π»Π΅Π²ΠΎΠ΅ = 2em */ BODY { margin: 1em 2em 3em } /* Π²Π΅Ρ€Ρ…Π½Π΅Π΅=1em, ΠΏΡ€Π°Π²ΠΎΠ΅=2em, Π½ΠΈΠΆΠ½Π΅Π΅=3em, Π»Π΅Π²ΠΎΠ΅=2em */


ПослСднСС ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ эквивалСнтно ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌΡƒ:


BODY { margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 2em; /* копируСтся ΠΈΠ· ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΠΎΠΉ стороны (ΠΈΠ· ΠΏΡ€Π°Π²ΠΎΠΉ) */


Π’ этой спСцификации Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ сТатиС ΠΏΠΎΠ»Π΅ΠΉ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ смСТныС поля (Π½Π΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‘Π½Π½Ρ‹Π΅ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΈ Ρ€Π°ΠΌΠΊΠ°ΠΌΠΈ) Π΄Π²ΡƒΡ… ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ боксов (ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΈΠ»ΠΈ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌΠΈ) ΠΎΠ±Ρ€Π°Π·ΡƒΡŽΡ‚ Π΅Π΄ΠΈΠ½ΠΎΠ΅ ΠΏΠΎΠ»Π΅.

Π’ CSS2 Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ поля Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΡΠΆΠΈΠΌΠ°ΡŽΡ‚ΡΡ.

Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ поля ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΆΠΈΠΌΠ°Ρ‚ΡŒΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹ΠΌΠΈ боксами:

[x]. Π”Π²Π° ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ смСТных Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Ρ… поля боксов Π±Π»ΠΎΠΊΠ° ΠΏΡ€ΠΈ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠΌ располоТСнии ΡΠΆΠΈΠΌΠ°ΡŽΡ‚ΡΡ. Π Π΅Π·ΡƒΠ»ΡŒΡ‚ΠΈΡ€ΡƒΡŽΡ‰Π°Ρ ΡˆΠΈΡ€ΠΈΠ½Π° поля - это максимальная ΡˆΠΈΡ€ΠΈΠ½Π° ΠΈΠ· смСТных ΠΏΠΎΠ»Π΅ΠΉ. Π’ случаС Π½Π΅Π³Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ΠΏΠΎΠ»Π΅ΠΉ, Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΉ максимум Π½Π΅Π³Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… смСТных ΠΏΠΎΠ»Π΅ΠΉ отсчитываСтся ΠΎΡ‚ максимума ΠΏΠΎΠ·ΠΈΡ‚ΠΈΠ²Π½Ρ‹Ρ… смСТных ΠΏΠΎΠ»Π΅ΠΉ. Если Π½Π΅Ρ‚ ΠΏΠΎΠ·ΠΈΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΏΠΎΠ»Π΅ΠΉ, Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΉ максимум Π½Π΅Π³Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… смСТных ΠΏΠΎΠ»Π΅ΠΉ отсчитываСтся ΠΎΡ‚ нуля.

[x]. Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ поля ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π΅ΠΌΡ‹ΠΌ боксом ΠΈ Π»ΡŽΠ±Ρ‹ΠΌ Π΄Ρ€ΡƒΠ³ΠΈΠΌ боксом Π½Π΅ ΡΠΆΠΈΠΌΠ°ΡŽΡ‚ΡΡ.

[x]. Поля Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… боксов Π½Π΅ ΡΠΆΠΈΠΌΠ°ΡŽΡ‚ΡΡ.

Π‘ΠΌ. ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ сТимаСмых ΠΏΠΎΠ»Π΅ΠΉ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠΎΠ»Π΅ΠΉ, заполнСния ΠΈ Ρ€Π°ΠΌΠΎΠΊ.

Бвойства обтСкания ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΡ†ΠΈΡ€ΡƒΡŽΡ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ области заполнСния бокса. Π‘ΠΎΠΊΡ€Π°Ρ‰Ρ‘Π½Π½ΠΎΠ΅ свойство 'padding' устанавливаСт Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ для всСх Ρ‡Π΅Ρ‚Ρ‹Ρ€Ρ‘Ρ… сторон, Π° Π΄Ρ€ΡƒΠ³ΠΈΠ΅ свойства заполнСния ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‚ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ стороны.

Бвойства, ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹Π΅ Π² этом Ρ€Π°Π·Π΄Π΅Π»Π΅, относятся ΠΊ Ρ‚ΠΈΠΏΡƒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ <padding-width>, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π²:

<length>

Π‘ΠΏΠ΅Ρ†ΠΈΡ„ΠΈΡ†ΠΈΡ€ΡƒΠ΅Ρ‚ Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ.

<percentage>

ΠŸΡ€ΠΎΡ†Π΅Π½Ρ‚Π½ΠΎΠ΅, высчитываСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ содСрТащСго Π±Π»ΠΎΠΊΠ°, Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΡŽΡ‰Π΅Π³ΠΎ бокс, Π² Ρ‚ΠΎΠΌ числС ΠΈ для 'padding-top' ΠΈ 'padding-bottom'.

Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ свойств ΠΏΠΎΠ»Π΅ΠΉ, значСния заполнСния Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π΅Π³Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ. Как ΠΈ Π² свойствах ΠΏΠΎΠ»Π΅ΠΉ, ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π½Ρ‹Π΅ значСния свойств заполнСния относятся ΠΊ ΡˆΠΈΡ€ΠΈΠ½Π΅ бокса, сгСнСрированного содСрТащим Π±Π»ΠΎΠΊΠΎΠΌ.

'padding-top', 'padding-right', 'padding-bottom', 'padding-left'

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅: <padding-width> | inherit

ΠΠ°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅: 0

ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠ΅Ρ‚ΡΡ: ΠΊΠΎ всСм элСмСнтам

НаслСдуСтся: Π½Π΅Ρ‚

ΠŸΡ€ΠΎΡ†Π΅Π½Ρ‚Π½ΠΎΠ΅: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ содСрТащСго Π±Π»ΠΎΠΊΠ°

ΠΠΎΡΠΈΡ‚Π΅Π»ΡŒ: Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ

Π­Ρ‚ΠΈ свойства ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅Π΅, ΠΏΡ€Π°Π²ΠΎΠ΅, Π½ΠΈΠΆΠ½Π΅Π΅ ΠΈ Π»Π΅Π²ΠΎΠ΅ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ для бокса.


BLOCKQUOTE { padding-top: 0.3em }


'padding'

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅: <padding-width>{1,4} | inherit

ΠΠ°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅: Π½Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ для сокращённого свойства

ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠ΅Ρ‚ΡΡ: ΠΊΠΎ всСм элСмСнтам