Харьцангуй дүүргэлтийн утга. CSS-ийн маржин болон дэвсгэрийг хэрхэн тохируулах талаар (болон гайхалтай байршлын зөвлөмжүүд). Юу санах вэ

Зохиогчоос:Би анх CSS сурч эхлэхдээ захын зай, дүүргэлтийн талаар эргэлзсээр байсан. Тэд маш төстэй мэт санагдаж, зарим тохиолдолд ижил үр дүнг өгдөг. Энэ зааварт та CSS-ийн ирмэг ба дүүргэлтийн хоорондох ялгаа, эдгээр шинж чанарууд нь хуудасны элементүүдийн хоорондын зайд хэрхэн нөлөөлөхийг харах болно. Мөн бид хариу үйлдэл үзүүлэх вэб сайт үүсгэхдээ захын зайг багасгах, өөр өөр хэмжүүр ашиглах талаар ярилцах болно. Бид нийтлэлээ захын зай, дүүргэлт ашиглан зохион байгуулалтын талаар хэд хэдэн зөвлөмжөөр дуусгах болно.

Блок загвар

CSS-ийн элементүүд нь тэгш өнцөгт хайрцаг хэлбэрээр илэрхийлэгддэг. Тэгш өнцөгт блокийн хэмжээг тухайн элементийн шинж чанараар тодорхойлно: агуулга, дэвсгэр, хүрээ, зах.

Элементийн агуулгын талбар нь дунд хэсэгт байрладаг. Дараа нь дүүргэгч нь агуулгын хэсгийг хүрээлдэг. Хүрээ нь жийргэвчийг хүрээлж, ирмэг нь гаднах давхарга, i.e. энэ нь элементийн гадна байдаг. Бидний юу ярьж байгааг илүү сайн ойлгохын тулд диаграммыг доор харуулав.

Диаграмаас харахад padding нь элементийг агуулгын хэсгийн гадна ирмэгээс хүрээний дотоод ирмэг хүртэл сунгадаг давхарга юм. Энэ шинж чанар нь элементийн хүрээ болон түүний агуулгын хоорондох зайг хянадаг. Padding нь хуудасны элементийн хэмжээнд нөлөөлдөг боловч хуудасны элементүүдийн хоорондын зайд ямар ч нөлөө үзүүлэхгүй.

Хэрэв та элементүүдийн хоорондох зайг нэмэгдүүлэх эсвэл багасгах шаардлагатай бол захын зайг ашиглана уу. Margin шинж чанар нь элементийн хэмжээнд ямар ч байдлаар нөлөөлөхгүй.

Вэб хуудасны бүх блокуудын хэмжээ нь ашигласан блокийн загвараас хамаарна гэдгийг санах нь чухал. Хоёр блок загвар байдаг: W3C блок загвар, уламжлалт блок загвар.

W3C блок загварын дагуу элементийн өргөнийг блокийн агуулгаар тооцоолж, дүүргэлт болон захын зайг харгалзахгүйгээр хийдэг. Дээрээс нь жийргэвч болон хүрээг нэмж оруулсан өгөгдсөн хэмжээсүүд, энэ нь хуудасны зохион байгуулалтад гэнэтийн үр дагаварт хүргэж болзошгүй.

Жишээлбэл, өргөн нь 200px, өндөр нь 200px, бүх талдаа 10px дүүргэлттэй, бүх талдаа 2px хүрээтэй блокыг авч үзье. Хөтөч нь 200px блокыг харахгүй байна. Хөтөч нь блокыг харуулахад шаардагдах хэвтээ зайг тооцдог бөгөөд энэ нь 224px: 200(өргөн)+2(зүүн хүрээ)+10(зүүн жийргэвч)+10(баруун жийргэвч)+2(баруун хүрээ)=224px. Энэ нь дөрвөлжин тул өндөр нь мөн 224px байх болно.

Нөгөөтэйгүүр, уламжлалт блок загвар нь агуулга, дэвсгэр болон хилийн нийлбэрийг өргөн болгон авдаг. Энэ нь хэрвээ таны блок 200 пикселийн өргөнтэй бол хөтөч үүнийг харуулахад шаардагдах хэвтээ зайг тооцоолох бөгөөд дэвсгэр болон хүрээ зэргийг оруулаад 200 пиксел байх болно. Үр дүн нь илүү урьдчилан таамаглах боломжтой бөгөөд ажиллахад хялбар болно.

Анхдагч байдлаар, бүх хөтөч W3C блок загварыг ашигладаг. Box-sizing шинж чанарыг ашиглан загварыг гараар тохируулж болно. Хоёр утгыг хүлээн зөвшөөрдөг: контент хайрцаг (W3C) ба хилийн хайрцаг (уламжлалт загвар). Уламжлалт загвар нь илүү ойлгомжтой бөгөөд энэ нь вэб хөгжүүлэгчдийн дунд хамгийн алдартай болсон.

Төсөлдөө уламжлалт загварыг ашиглахын тулд хайрцагны хэмжээг хэрхэн ашиглах талаар эндээс үзнэ үү.

html ( хайрцагны хэмжээ: хилийн хайрцаг; ) *, *: өмнө, *: дараа (хайрцагны хэмжээ: өвлөх; )

html (

хайрцаг - хэмжээ : хил - хайрцаг ;

* , * : өмнө , * : дараа (

хайрцаг - хэмжээ : өвлөх ;

Хэрэв та өөрөө аливаа зүйлийг хурдан санаж байвал Гай Роутлежийн хөгжилтэй интерактив үзүүлбэрийг туршиж үзээрэй.

Хөвөө болон дүүргэлтийг тохируулах

Элементийн дөрвөн талын дэвсгэрийг удирдахын тулд та padding-top, padding-right, padding-bottom, padding-left шинж чанаруудыг ашиглаж болно. Дүүргэлтийг мөн товчилсон шинж чанараар зааж өгч болно. Хэрэв нэг дүүргэлтийн утгыг бичсэн бол CSS нь үүнийг бүх 4 талын дэвсгэрийг тодорхойлоход ашигладаг:

/* бүх 4 тал */ дэвсгэр: 10px;

Хэрэв 3 утгыг танилцуулсан бол эхнийх нь дээд, хоёр дахь нь баруун, зүүн, гурав дахь нь доод талыг хариуцна.

/* дээд | хэвтээ | доод */ дэвсгэр: 1em 20px 2em;

Хэрэв бүх 4 утгыг танилцуулсан бол тус бүр нь дээд, баруун, доод, зүүн хэсгийг хариуцна.

/* дээд | зөв | доод | зүүн */ дэвсгэр: 10px 10% 2em 15%;

Доорх үзүүлэн дээр улбар шар дэвсгэр нь өөр өөр элементүүдийн агуулгын талбар, хүрээ болон контентын хоорондох цагаан хэсэг нь дэвсгэр юм:

Дүүргэлтийн адил гадаад захыг margin-top, margin-right, margin-bottom, margin-left шинж чанаруудыг ашиглан 4 талаас нь хянах боломжтой. Та мөн товчилсон шинж чанарыг ашиглан бүх 4 талын захын зайг нэг дор тохируулж болно.

/* бүх 4 тал */ захын зай: 10px; /* босоо | хэвтээ */ зах: 2em 4em; /* дээд | хэвтээ | доод */ зах: 2em автомат 2em; /* дээд | зөв | доод | зүүн */ зах: 10px 10% 2em 15%;

Юу санах вэ

Хэмжилтийн зөв нэгжийг ашигла

Жийргэвч болон захын зайтай ажиллахдаа үнэмлэхүй хэмжүүрээс зайлсхий. Ийм нэгж нь үсгийн хэмжээ болон дэлгэцийн өргөний өөрчлөлтөд дасан зохицож чаддаггүй.

Та элементийн өргөнийг 50%, ирмэгийг 15px болгож тохирууллаа гэж бодъё. 1200px өргөнтэй үед элементийн өргөн нь 600px, захын зай нь 15px байх болно. 769px өргөнтэй үед элементийн өргөн нь 384px байх ба захын зай нь 15px хэвээр байх болно.

Элементийн өргөн нь 36%-иар өөрчлөгдсөн ч захын зай нь хэвээр байна. Ихэнх тохиолдолд энэ нь хамгийн том асуудал биш юм. Гэсэн хэдий ч, хэрэв та элементийн хязгаарыг хувь болгон тохируулбал бүх дэлгэц дээрх хуудасны байршлыг илүү хянах боломжтой болно. Хэрэглэсэн захын зай болон дүүргэлтийн утгын огцом үсрэлтгүйгээр бүх зүйл пропорциональ харагдах болно.

Үүний нэгэн адил та хуудасны текстийн элементүүдэд дэвсгэр нэмэхийг хүсч болно. Ихэнх тохиолдолд та дэвсгэрийг тухайн элемент дээрх үсгийн хэмжээтэй пропорциональ байлгахыг хүсдэг. Үүнийг үнэмлэхүй нэгжээр хийх боломжгүй юм. Гэсэн хэдий ч хэрэв та дэвсгэрийг em гэж тохируулбал энэ нь үсгийн хэмжээг автоматаар тохируулах болно. Доорх демо нь үйл ажиллагааны масштабыг харуулж байна.

Хөтөчүүд өөр өөр хэмжлийн нэгжийн захын зай болон дэвсгэрийг хэрхэн тооцдог

Хөтөчүүд хэмжилтийн нэгжээс хамааран эцсийн маржин ба дүүргэлтийн утгыг өөр өөрөөр тооцдог.

Хувиар тодорхойлогдсон хөвөө, дэвсгэрийг савны өргөнтэй харьцуулан тооцно. Өөрөөр хэлбэл, савны өргөн нь 100px бол 5% дүүргэлт нь 5px, эсвэл савны өргөн нь 1000px бол 50px-тэй тэнцүү байна. Дээд ба доод утгыг савны өргөн дээр үндэслэн тооцдог гэдгийг бүү мартаарай.

Em-ийн хувьд захын зай болон дэвсгэр нь тухайн элементийн үсгийн хэмжээнээс хамаарна. Өмнөх үзүүлэн дээр доод гурван текстийн элементийн дэвсгэр нь 1em байна. Үсгийн янз бүрийн хэмжээтэй тул тооцоолсон дэвсгэрийн утга үргэлж өөр байх болно.

Мөн vw, vh, vmin болон vmax хэмжилтийн 4 харах хэсэг байдаг. Энэ тохиолдолд захын зай ба дүүргэлтийн утга нь харах цонхноос хамаарна. Жишээ нь, 5vw-ийг дүүргэх нь 500px өргөнтэй харах цонхны өргөнтэй 25px-тэй тэнцүү байх ба 10vw-ийг дүүргэх нь ижил харагдах цонхонд 50px-тэй тэнцүү байх болно. Та эдгээр хэмжилтийн нэгжийг SitePoint вэб сайтын "Хэмжих нэгжийн CSS харах хэсэг: Хурдан эхлүүлэх" нийтлэлээс илүү нарийвчлан судлах боломжтой.

Хэрэв та анхлан суралцагч бол эдгээр нэгж хэрхэн ажилладагийг мэдэх нь HTML элементийн дэвсгэр, фонт, тэр ч байтугай харах цонхны хэмжээ зэргээс хамаарч яагаад өөрчлөгддөгийг хурдан ойлгоход тусална. Мөн энэ нь таны байршлыг хянах боломжийг танд олгоно.

Маржингийн нуралт

Та мөн захын сүйрлийн тухай ойлголтын талаар мэдэх хэрэгтэй. Тодорхой нөхцөл байдалд хоёр элементийн дээд ба доод захын зай нь нэг болж нурж болно. Энэ үзэгдлийг захын уналт гэж нэрлэдэг.

Танд нэг дор нөгөө хоёр элемент байна гэж бодъё. ижил түвшинд. Хэрэв та эхний элемент дээр доод тал нь 40px, хоёр дахь нь дээд тал нь 25px байвал элементүүдийн хоорондын зай 65px-тэй тэнцэхгүй. Догол нь том захын утгатай тэнцүү байх болно, i.e. 40px.

Үүний нэгэн адил, захын зай нь эцэг эх болон эхний эсвэл сүүлчийн хүүхдийн хооронд нурж болно. Энэ нь хүүхэд болон эцэг эхийн захын зайг тусгаарлах хүрээ, дэвсгэр эсвэл доторлогооны контент байхгүй тохиолдолд тохиолддог. Энэ тохиолдолд, хэрэв эцэг эх дээр ямар ч жийргэвч эсвэл хүрээ байхгүй бол хүүхэд элементийн зах нь эцэг эхээс "урсдаг".

Энэ зан үйлийг засч залруулах боломжтой. Үүнийг хийхийн тулд та эцэг эх болон хүүхдийн захын хоорондох саадыг нэмэх хэрэгтэй. Доорх үзүүлэн нь үндсэн элементэд хүрээ эсвэл дэвсгэр нэмэх нь асуудлыг хэрхэн шийдэж болохыг харуулж байна.

Сөрөг захын хувьд унасан захын эцсийн утга нь хамгийн бага сөрөг утгатай эерэг маржингийн нийлбэртэй тэнцүү байна. Та Адам Робертсийн "Нуралтын ирмэг" нийтлэлээс захын ирмэгийн сэдвийг илүү нарийвчлан судлах боломжтой.

Маржин болон дэвсгэрийг ашиглах сонирхолтой аргууд

Заримдаа захын зай, дүүргэлт нь байршлын асуудлыг шийдвэрлэхэд тусалдаг. Зарим жишээг доор харуулав.

Зурган дээрх харьцааг хадгалах

Ихэнхдээ хуудсан дээрх зургууд өөр өөр харьцаатай байдаг. Хэрэв та ижил харьцаатай бүх зургийг харуулах шаардлагатай бол CSS padding танд туслах болно.

Үүнийг хийхийн тулд та эцэг эхийн өндрийг тэг болгож тохируулах хэрэгтэй бөгөөд эцэг эхийн padding-top шинж чанар нь хувиар илэрхийлсэн харьцааны утгатай тэнцүү байх ёстой.

Жишээ нь, 16:9 харьцааг нөхөх замаар олж авна: 56.25% 0 0 0. 56.25 утгыг (9/16)*100-аар авна. Энэ аргыг ашигласнаар та бусад харьцааны хувьд дүүргэлтийн хувийг тооцоолж болно.

Дүгнэлт

Хэрэв та CSS-ийг дөнгөж сурч эхэлж байгаа бол энэ заавар нь захын зай болон дүүргэлтийн хоорондох ялгааг ойлгоход тусалсан гэж найдаж байна. Та товчилсон үг, тохирох хэмжилтийн нэгжийг ашиглан захын зай, дэвсгэрийг хэрхэн тохируулах талаар сурах хэрэгтэй. Сүүлийн хэсэгт би хоёрыг харуулсан сонирхолтой арга замуудбайршилд шинж чанаруудыг ашиглах, мөн цаашдын суралцах эх сурвалжуудын холбоосыг танд өгсөн. Хэрэв танд CSS-ийн ирмэг ба дүүргэлтийн талаар өөр зөвлөгөө байгаа бол тэдгээрийг сэтгэгдэл дээр нийтэлнэ үү.

Тодорхойлолт

Элементийн агуулгын эргэн тойрон дахь захын утгыг тохируулна. Маржин нь элементийн хүрээний дотоод ирмэгээс түүний агуулгыг хязгаарлаж буй төсөөллийн тэгш өнцөгт хүртэлх зай юм (Зураг 1).

Padding шинж чанар нь элементийн бүх талын дүүргэлтийн утгыг нэг дор тохируулах эсвэл зөвхөн заасан талуудын хувьд тодорхойлох боломжийг олгодог.

Синтакс

дэвсгэр: [утга | хувь] (1, 4) | өвлөн авах

Үнэ цэнэ

Та хоосон зайгаар тусгаарласан нэг, хоёр, гурав, дөрвөн утгыг ашиглаж болно. Үр нөлөө нь утгын тооноос хамаардаг бөгөөд хүснэгтэд үзүүлэв. 1.

Талбайн хэмжээг пиксел (px), хувь (%) эсвэл CSS-д зөвшөөрөгдөх бусад нэгжээр тодорхойлж болно. Өв залгамжлах утга нь эцэг эхээс удамшсан болохыг илтгэнэ. Маржийг хувиар зааж өгөхдөө тухайн элементийн эх хэсгийн өргөнөөс утгыг тооцоолно.

HTML5 CSS2.1 IE Cr Op Sa Fx

дэвсгэр

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Энэ нь хамгийн багадаа хамгийн багадаа, ямар ч байсан дасгал хийх нь ямар ч тохиолдолд үүнтэй холбоотой юм.

Үр дүн энэ жишээЗурагт үзүүлэв. 2.

Цагаан будаа. 2. Padding шинж чанарыг хэрэглэх

Объект загвар

document.getElementById("elementID ").style.padding

Хөтөчүүд

Internet Explorer-ийн 7.0 хүртэлх хувилбарууд нь удамших утгыг дэмждэггүй.

Өмнөх бүлэгт бид үүнийг дурдсан CSS шинж чанарууд, захын зай (талбар) болон дэвсгэр (догол) гэх мэт. Одоо бид тэдгээрийг илүү нарийвчлан авч үзэх бөгөөд тэдгээр нь бие биенээсээ хэрхэн ялгаатай, ямар онцлог шинж чанартай болохыг авч үзэх болно.

Та нэг эсвэл өөр аргаар элементүүдийн хооронд зай үүсгэж болно, гэхдээ хэрэв дүүргэлт нь контентоос блокийн ирмэг хүртэлх догол юм бол маржин нь нэг блокоос нөгөө блок хүртэлх зай буюу блок хоорондын зай юм. Дэлгэцийн зураг нь тодорхой жишээг харуулж байна:

Дүүргэлт нь агуулгыг блокийн хүрээнээс тусгаарлаж, захын зай нь блокуудын хооронд зай үүсгэдэг

Таны харж байгаагаар CSS-ийн захын зай болон дүүргэлт нь бие биенээсээ ялгаатай боловч заримдаа кодыг харахгүйгээр зайг тохируулахын тулд ямар шинж чанарыг ашиглахыг тодорхойлох боломжгүй байдаг. Энэ нь агуулгын блокийн хүрээ эсвэл дэвсгэр байхгүй тохиолдолд тохиолддог.

Элементийн тал бүр дээр CSS дээр маржин эсвэл дүүргэлтийг тохируулахын тулд дараах шинж чанарууд байдаг:

Дүүргэгч:

дэвсгэр: утга;
дэвсгэр-баруун: утга;
дэвсгэр-доод: утга;
дэвсгэр-зүүн: утга;

Талбарууд:

захын дээд: утга;
баруун захын зай: утга;
захын доод: утга;
зүүн захын зай: утга;

Утгыг дурын CSS нэгжээр зааж өгч болно - px, em, % гэх мэт. Жишээ нь: margin-top: 15px .

гэх мэт маш тохиромжтой зүйл бас бий захын зай ба дүүргэх CSS товчлол. Хэрэв та элементийн дөрвөн тал дээр захын зай эсвэл дүүргэлт хийх шаардлагатай бол тал бүрийн шинж чанарыг тус тусад нь бичих шаардлагагүй. Бүх зүйл илүү хялбар болсон: захын зай, дүүргэлтийн хувьд та 1, 2, 3 эсвэл 4 утгыг нэг дор зааж өгч болно. Утгын тоо нь тохиргоог хэрхэн хуваарилахыг тодорхойлдог.

4 утга: дүүргэлтийг элементийн бүх талд дараах дарааллаар тохируулна: дээд, баруун, доод, зүүн: padding: 2px 4px 5px 10px;
3 утга: дэвсгэрийг эхлээд дээд талд, дараа нь зүүн, баруун талд нэгэн зэрэг, дараа нь доод талд байрлуулна: padding: 3px 6px 9px;
2 утга: дэвсгэрийг эхлээд дээд ба доод талаас, дараа нь зүүн ба баруун талд нэгэн зэрэг тохируулна: padding: 6px 12px;
1 утга: элементийн бүх талд тэгш дүүргэлт тохируулагдсан: padding: 3px;

CSS margin шинж чанарт ижил дүрмүүд хамаарна. Та маржингийн хувьд сөрөг утгыг (жишээлбэл, -3px) ашиглаж болно гэдгийг анхаарна уу, энэ нь заримдаа маш хэрэгтэй байж болно.

Маржийг буулгах

Нөхцөл байдлыг төсөөлөөд үз дээ: хоёр блок элементбие биенийхээ дээр байрлах ба захын талбарууд өгөгдсөн. Учир нь дээд блокУтгыг margin: 60px, доод талыг нь margin: 30px гэж тохируулсан. Хоёр элементийн хилийн хоёр талбар нь зүгээр л хүрч, үр дүнд нь блокуудын хоорондох зай 90 пикселтэй тэнцүү байх болно гэж үзэх нь логик юм.

Гэсэн хэдий ч бүх зүйл өөр байна. Үнэн хэрэгтээ ийм нөхцөлд элементүүдийн хоёр зэргэлдээ талбараас хамгийн том хэмжээтэйг нь сонгоход нуралт гэж нэрлэгддэг эффект үүсдэг. Бидний жишээн дээр элементүүдийн хоорондох эцсийн зай нь 60 пиксел байх болно.

Блокуудын хоорондох зай нь хамгийн том утгатай тэнцүү байна

Хураах зах нь зөвхөн элементүүдийн дээд ба доод хэсэгт ажиллах ба баруун болон зүүн талын захад хамаарахгүй. Янз бүрийн нөхцөлд эцсийн зөрүүний утгыг өөр өөрөөр тооцдог.

Маржингийн утга хоёулаа эерэг байвал үүссэн маржин хэмжээ нь том хэмжээтэй тэнцүү байх болно.
Хэрэв утгуудын аль нэг нь сөрөг байвал талбарын хэмжээг тооцоолохын тулд та утгуудын нийлбэрийг авах хэрэгтэй. Жишээлбэл, 20px ба -18px-ийн утгуудын хувьд талбарын хэмжээ нь:
20 + (-18) = 20 – 18 = 2 пиксел.
Хэрэв хоёулаа сөрөг утгатай бол эдгээр тоонуудын модулийг харьцуулж, илүү том модультай тоог (тиймээс сөрөг тоонуудаас бага) сонгоно. Жишээ нь: та -6px ба -8px талбаруудын утгыг харьцуулах хэрэгтэй. Харьцуулж буй тоонуудын модулиуд нь 6 ба 8 байна. Үүнээс үзэхэд 6-8 байна. Үүссэн талбарын хэмжээ -8 пиксел байна.
утгыг заасан тохиолдолд өөр өөр нэгжүүд CSS, тэдгээрийг нэг болгон бууруулж, дараа нь харьцуулж, илүү том утгыг сонгоно.
Хүүхдийн элементүүдийн захын хэмжээг илүү сонирхолтой байдлаар тодорхойлдог: хэрэв хүүхэд эцэг эхээсээ илүү их зайтай бол түүнд давуу эрх олгоно. Энэ тохиолдолд эцэг эхийн дээд ба доод захын хэмжээ нь хүүхдэд заасан хэмжээтэй ижил байх болно. Энэ тохиолдолд эцэг эх, хүүхдийн хооронд ямар ч зай байхгүй болно.

Тодорхойлолт

Синтакс

дэвсгэр: [утга | хувь] (1, 4) | өвлөн авах

Үнэ цэнэ

HTML5 CSS2.1 IE Cr Op Sa Fx

дэвсгэр

Энэ жишээний үр дүнг Зураг дээр үзүүлэв. 2.

Цагаан будаа. 2. Padding шинж чанарыг хэрэглэх

Объект загвар

document.getElementById("elementID ").style.padding

Хөтөчүүд

Internet Explorer-ийн 7.0 хүртэлх хувилбарууд нь удамших утгыг дэмждэггүй.

Би танд шууд хэлье - энэ бол маш чухал сургамж юм. Үүнийг судалсны дараа та хуудсан дээр элементүүдийг байрлуулж, тэдгээрийн хооронд догол мөр тавьж, тусдаа тусгай блок дотор үүсгэж, захын зайг тохируулах боломжтой болно.

дэвсгэр

Padding нь элементийн хүрээний дотоод ирмэгээс контент хүртэлх дүүргэлтийн хэмжээг тогтоох шинж чанар юм. Агуулга нь энгийн текст, зураг эсвэл өөрийн гэсэн талбартай хүүхэд элемент байж болно.

Нэгж нь пиксел (px) эсвэл хувь (%) байж болно.

#блок (
дүүргэх: 12px; /* блокийн хүрээнээс контент хүртэлх догол - бүх талдаа 12 пиксел */
}

Зөвхөн нэг талбарт талбарыг зааж өгөх боломжтой:

дэвсгэр- дээд талд талбар үүсгэдэг өмч.
жийргэвч-баруун- баруун талд талбар үүсгэдэг өмч.
дэвсгэр-доод- доод талд талбар үүсгэдэг өмч.
дэвсгэр-зүүн- зүүн талд талбар үүсгэдэг өмч.

#блок (
доод талын дэвсгэр: 25px; /* доод захын зай 25 пиксел */
дэвсгэр-зүүн: 15px; /* зүүн захын зай 15 пиксел */
}

Таны анзаарсанчлан, хэрэв та 2 эсвэл 3 талдаа талбаруудыг ингэж зааж өгвөл урт код гарч ирнэ. Энэ зорилгоор padding өмчийн товчлол байдаг. Энэ нь бүх 4 утгыг ээлжлэн заадаг - нэг шугамын ирмэг бүрээс эхлэн хөдөлгөөн нь цагийн зүүний дагуу, дээрээс нь эхэлдэг.

Padding: TopPadding RightPadding PaddingBottom PaddingLeft;

#блок (
дүүргэх: 25px 10px 15px 6px; /* дээд 25px, баруун 10px, доод 15px, зүүн 6px */
}

маржин

Margin шинж чанар нь дүүргэлтээс ялгаатай нь элементүүдийн хил хоорондын доголын хэмжээг тогтоодог.
Хэрэв элемент нь хүүхэд байвал дэвсгэр нь элементийн хүрээнээс эхийн хүрээний дотоод ирмэг хүртэлх зай юм.
Хэрэв элементэд эцэг эх байхгүй бол догол нь хүрээлэн буй элементүүдийн хүрээний ирмэг хүртэл өмчөөр тогтоосон чөлөөт зай юм.

#блок (
захын зай: 4px;
}

Зөвхөн тодорхой тал дээр догол мөрийг тодорхойлохын тулд дараах шинж чанарууд байдаг.

захын дээд- дээд талд догол үүсгэх шинж чанар.
захын баруун- баруун талд догол үүсгэх өмч.
захын доод- доод хэсэгт догол үүсгэх шинж чанар.
зах-зүүн- зүүн догол үүсгэх шинж чанар.

Дүүргэлтийн шинж чанарын нэгэн адил маржин нь өөр өөр талуудын утгыг товчлох чадвартай байдаг. Хөдөлгөөн нь цагийн зүүний дагуу, дээд талбараас:

Хөвөө: Дээд захын баруун захын зай Доод захын зүүн;

#блок (
захын зай: 15px 10px 5px 25px; /* дээд 15px, баруун 10px, доод 5px, зүүн 25px */
}

Анхаарал тавьсанд баярлалаа!