Ópoê 10:
Ïoëÿ è çaïoëíeíèe

Oãëaâëeíèe (â íoâoì oêíe)
Bíèç

B ïpeäûäyùeì ypoêe ìû paccìoòpeëè áoêcoâyþ ìoäeëü. B ýòoì ypoêe oáúÿcíèì, êaê ìoæío èçìeíÿòü ïpeäcòaâëeíèe ýëeìeíòoâ câoécòâaìè margin è padding.

Ócòaíoâèì ïoëÿ ýëeìeíòa

Ó ýëeìeíòa ecòü ÷eòûpe còopoíû: right, left, top, bottom.
Ïoëÿ margin ýòo paccòoÿíèe oò êaæäoé còopoíû c äo coceäíèx ýëeìeíòoâ (èëè êpaeâ äoêyìeíòa).
B êa÷ecòâe ïepâoão ïpèìepa ìû paçáepeìcÿ, êaê oïpeäeëèòü ïoëÿ caìoão äoêyìeíòa, ò. e. ýëeìeíòa <body>. Ha èëëþcòpaöèè ïoêaçaío, êaêèe ïoëÿ íaì íyæíû.

CSS-êoä äëÿ ýòoão ïpèìepa âûãëÿäèò òaê:

body
{margin-top: 100px;
margin-right: 40 px;
margin- bottom: 10px;
margin-left: 70px;}

Èëè âû ìoæeòe íaïècaòü áoëee ýëeãaíòío:

body {margin: 100px 40px 10px 70px;}

Bû ìoæeòe ycòaíoâèòü ïoëÿ ïpèìepío òaêèì æe oápaçoì ïo÷òè äëÿ ëþáoão ýëeìeíòa. Haïpèìep, ìû ìoæeì oïpeäeëèòü ïoëÿ äëÿ âcex ïapaãpaôoâ <p>:

body
{margin: 100px 40px 10px 70px;}
p
{margin: 5px 50px 5px 50px;}

Ócòaíoâèì çaïoëíeíèe ýëeìeíòa

Çaïoëíeíèe íe âëèÿeò ía paccòoÿíèe ýëeìeíòa äo äpyãèx ýëeìeíòoâ, a ëèøü oïpeäeëÿeò âíyòpeííee paccòoÿíèe ìeæäy paìêoé è coäepæèìûì ýëeìeíòa.

Ècïoëüçoâaíèe çaïoëíeíèÿ/padding ìoæío ïoêaçaòü ía ïpocòoì ïpèìepe, ãäe âce çaãoëoâêè èìeþò öâeòíoé ôoí:

h6 {background: yellow;} h5 {background: orange;}

Çaãoëoâoê
Çaãoëoâoê

Oïpeäeëÿÿ çaïoëíeíèe äëÿ çaãoëoâêoâ, âû ycòaíaâëèâaeòe âeëè÷èíy ïoëÿ âoêpyã òeêcòa êaæäoão çaãoëoâêa:

h6 {background: yellow; padding: 20 px 20 px 20 px 80px;}
h5 {background: orange; padding-left:120px;}

Çaãoëoâoê
Çaãoëoâoê

Peçþìe

Baì ocòaëcÿ oäèí øaã äo coçäaíèÿ áoêcoâoé ìoäeëè â CSS. B cëeäyþùeì ypoêe ìû paccìoòpèì, êaê ycòaíaâëèâaòü paìêè paçíoão öâeòa è êaê o÷ep÷èâaòü ýëeìeíòû.

Cëeäyþùèé ypoê: Paìêè

Haçaä

Bâepx