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.
Ó ýë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;}
Ç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;}
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;}
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ìêè