Өмнөх бүлэгт бид үүнийг дурдсан 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, тэдгээрийг нэг болгон бууруулж, дараа нь харьцуулж, илүү том утгыг сонгоно.
• Хүүхдийн элементүүдийн захын хэмжээг илүү сонирхолтой байдлаар тодорхойлдог: хэрэв хүүхэд эцэг эхээсээ илүү их маржинтай бол түүнд давуу эрх олгоно. Энэ тохиолдолд эцэг эхийн дээд ба доод захын хэмжээ нь хүүхдэд заасан хэмжээтэй ижил байх болно. Энэ тохиолдолд эцэг эх, хүүхдийн хооронд ямар ч зай байхгүй болно.

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

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

Бид нэг дор байрлах нимбэг, цэнхэр гэсэн хоёр ширээтэй. Хүснэгтүүд нэг нүднээс бүрдэнэ. Эхний хүснэгтийн нүдэнд улаан блок байна. Энэ жишээг ашиглан захын зай, догол мөр хэрхэн ажилладагийг харцгаая.

Талбаруудыг хэв маягаар тохируулсан дэвсгэр. Энэ загвар нь зөвхөн бусад элементүүдийг агуулж болох савны элементүүдэд хамаарна. Загвар нь элементийн ирмэг ба түүний агуулгын хоорондох зайг тохируулах боломжийг танд олгоно. Загвар маржинэлементээс өөр элементийн хамгийн ойрын хил хүртэл догол оруулах боломжийг танд олгоно. Өөр элементийн хүрээ нь эх контейнерийн хил, мөн хуудасны ирмэг байж болно.

Эдгээр хэв маягийг тохируулах хэд хэдэн арга байдаг. Жишээлбэл, хэмжилтийн зарим нэгжид (px, ex, em, pt, cm гэх мэт) нэг аргумент бүхий бүх захын зай эсвэл доголын хэмжээг шууд зааж өгнө үү:

дүүргэх: 3px; захын зай: 3px;

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

дүүргэх: 3px 5px; захын зай: 3px 5px;

Эхнийх нь дээд ба доод талд, хоёр дахь нь зүүн ба баруун талд байгаа захын / доголын хэмжээг тодорхойлно. Гурван аргумент өгөхөд:

дүүргэх: 3px 5px 2px; захын зай: 3px 5px 2px;

эхнийх нь дээд талд байгаа зах/догол, хоёр дахь нь зүүн ба баруун, гурав дахь нь доод талд байна. Дөрвөн аргументтай:

дүүргэх: 3px 5px 2px 6px; захын зай: 3px 5px 2px 6px;

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

Зураг дээр улаан блок нь хүснэгтийн нүдний дотор, түүний хилтэй зэргэлдээ байрладаг, өөрөөр хэлбэл нүд нь ямар ч ирмэггүй байна. Загварыг ашиглан нүдний захын зайг тохируулъя:

дүүргэх: 5px;

Үүний үр дүнд хуудас дараах байдлаар өөрчлөгдөнө.

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

захын дээд хэсэг: 5px;

Бид талбаруудын адил хүснэгтийн нүд рүү биш харин хүснэгтэд догол мөрийг тусгайлан тохируулдаг болохыг анхаарна уу. Үр дүн нь энд байна:

Дашрамд хэлэхэд, эхний тохиолдолд (улаан блок ба эх эсийн хил хоорондын зай) блокийн догол мөрийг тохируулах замаар ижил үр дүнд хүрч болно. Ерөнхийдөө хэрэв ямар нэг зүйл тодорхойгүй байвал сэтгэгдэл дээр мэдэгдээрэй.

Туршилтын хуудасны HTML код:

<html > <толгой > <гарчиг >Туршилт</гарчиг> <meta http-equiv = "Агуулгын төрөл" агуулга = "текст/html;charset=utf-8" > </толгой> <бие > <хэв маяг >хүснэгт (өргөн: 200px; өндөр: 150px; хүрээ: 1px цул #555; хүрээ нурах: нурах) td (босоо зэрэгцүүлэх: дээд; дэвсгэр: 0px) div (өргөн: 100px; өндөр: 100px; дэвсгэр: улаан)</хэв маяг> <хүснэгтийн хэв маяг = "арын дэвсгэр: шохой" > <tr > <td style = "padding: 5px" > <div style = "маржин: 0px" ></div> </td> </tr> </хүснэгт> <хүснэгтийн хэв маяг = "арын дэвсгэр: тэнгэрийн цэнхэр; захын дээд: 5px"> <tr > <td ></td> </tr> </хүснэгт> </бие> </html>Дотор нь

Та блокийн бүтцийг аль хэдийн мэддэг болсон гэж найдаж байна. Үгүй бол доор үзүүлэв.

Блокны бүтэц

Тэгэхээр. Блокны ирмэг ба захын зайг дүүргэх болон захын шинж чанаруудаар тус тус төлөөлдөг гэдгийг та аль хэдийн мэдсэн байх. Өмнөх нийтлэлд бид энэ сэдвийг аль хэдийн хэсэгчлэн хөндсөн. Энэ хуудсан дээр бид талбаруудыг нарийвчлан авч үзэх болно ( дэвсгэр) болон дэвсгэр ( маржин ).

Маржин ба дүүргэгчийн шинж чанарууд нь хоорондоо маш төстэй бөгөөд ижил төстэй функцүүдийг гүйцэтгэдэг тул тэдгээрийг ихэвчлэн андуурдаг. Гэхдээ мэдээжийн хэрэг та үүнийг хийх ёсгүй, учир нь захын болон догол нь огт өөр зүйл юм. Гэхдээ энэ нь зурагнаас тодорхой харагдаж байна, учир нь энд үзүүлсэн нь санамсаргүй биш юм.

Тэгэхээр. Захын зайг padding шинж чанараар тодорхойлно. Эдгээр нь блокийн хилээс түүний агуулга хүртэлх дотоод зай юм.

Энэ өмч нь бүх элементүүдэд хамаарна.

Зайг CSS уртын нэгжээр, %, эсвэл (( анхдагч

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

Блокны хилээс хамгийн ойрын элементүүд эсвэл хөтчийн цонхны ирмэг хүртэлх зайг тодорхойлдог margin шинж чанарыг ашиглан догол мөрийг тохируулдаг.

Margin шинж чанар нь бүх элементүүдэд мөн хамаарна.

Дүүргэлтийг мөн CSS уртын нэгжээр, %, эсвэл (( анхдагч) хөтөч автоматаар илрүүлдэг.

Margin шинж чанар нь бүх талдаа элементийн хүрээнээс доголын хэмжээг тогтоодог тул доголын өргөнийг тохируулдаг margin-top , margin-right , margin-bottom болон margin-left шинж чанаруудыг нэгтгэдэг тул бүх нийтийн шинж чанартай байдаг. элементийн хил тус бүрээс тус тусад нь .

Бас нэг зүйл: догол ( маржин) блокийн гадна талд байрладаг бол захын зай ( дэвсгэр) дотор нь, тиймээс блокийн дэвсгэр эсвэл энэ Арын зурагзөвхөн захын зайд хамаарах ба догол нь үргэлж ил тод эсвэл үндсэн хэсгийн дэвсгэртэй ( эцэг эх) блок эсвэл хуудасны дэвсгэр.

Кодын хэсэг: