Oldingi bobda biz buni aytib o'tgan edik CSS xususiyatlari, chegara (maydon) va to'ldirish (chekinti) kabi. Endi biz ularni batafsil ko'rib chiqamiz va ular bir-biridan qanday farq qilishini va qanday xususiyatlarga ega ekanligini ko'rib chiqamiz.

Elementlar orasidagi bo'shliqlarni u yoki bu tarzda yaratishingiz mumkin, lekin agar to'ldirish - bu tarkibdan blokning chetiga qadar bo'sh joy bo'lsa, u holda chekka bir blokdan ikkinchisiga masofa, bloklararo bo'shliqdir. Skrinshotda aniq misol ko'rsatilgan:

To'ldirish kontentni blok chegarasidan ajratadi va chekka bloklar orasidagi bo'shliqlarni yaratadi

Ko'rib turganingizdek, CSS chegaralari va to'ldirish bir-biridan farq qiladi, garchi ba'zida kodga qaramasdan masofani o'rnatish uchun qaysi xususiyatdan foydalanishni aniqlash mumkin emas. Bu kontent blokining ramkasi yoki foni yo'q bo'lganda sodir bo'ladi.

Elementning har bir tomonida CSS-da chekka yoki to'ldirishni o'rnatish uchun quyidagi xususiyatlar mavjud:

To'ldirish:

• to'ldiruvchi ustki: ma'nosi;
• to'ldirish - o'ng: ma'nosi;
• pastki qism: ma'nosi;
• to'ldirish-chap: ma'nosi;

Maydonlar:

• yuqori chegarasi: ma'nosi;
• o'ng chekka: ma'nosi;
• pastki chet: ma'nosi;
• chap chekka: ma'nosi;

Qiymatlar istalgan CSS birliklarida ko'rsatilishi mumkin - px, em, % va hokazo. Misol: margin-top: 15px .

kabi juda qulay narsa ham bor chegara va to'ldirish CSS uchun stenografiya. Agar elementning toʻrt tomoniga chekka yoki toʻldirishni oʻrnatishingiz kerak boʻlsa, har bir tomon uchun xususiyatni alohida yozishingiz shart emas. Hammasi soddalashtirilgan: chekka va to'ldirish uchun siz bir vaqtning o'zida 1, 2, 3 yoki 4 qiymatni belgilashingiz mumkin. Qiymatlar soni sozlamalar qanday taqsimlanishini aniqlaydi:

• 4 ta qiymat: toʻldirish elementning barcha tomonlari uchun quyidagi ketma-ketlikda oʻrnatiladi: yuqori, oʻng, past, chap: toʻldirish: 2px 4px 5px 10px;
• 3 ta qiymat: to'ldirish avval yuqori tomon uchun, keyin bir vaqtning o'zida chap va o'ng uchun, so'ngra pastki qism uchun o'rnatiladi: to'ldirish: 3px 6px 9px;
• 2 ta qiymat: to'ldirish avval yuqori va pastki tomondan bir vaqtning o'zida, keyin esa chap va o'ng uchun bir vaqtning o'zida o'rnatiladi: to'ldirish: 6px 12px;
• 1 qiymat: elementning barcha tomonlari uchun teng to'ldirish o'rnatiladi: to'ldirish: 3px;

Xuddi shu qoidalar CSS margin xususiyatiga nisbatan qo'llaniladi. Iltimos, marja uchun salbiy qiymatlardan ham foydalanishingiz mumkinligini unutmang (masalan, -3px), bu ba'zan juda foydali bo'lishi mumkin.

Chetni yig‘ish

Vaziyatni tasavvur qiling: ikkita blok elementi bir-birining ustiga joylashgan va ularga chekka maydonlar berilgan. Yuqori blok chekkaga o'rnatiladi: 60px , pastki blok esa chekkaga o'rnatiladi: 30px . Ikki elementning ikkita chegaradosh maydoni shunchaki tegib ketadi va natijada bloklar orasidagi bo'shliq 90 pikselga teng bo'ladi deb taxmin qilish mantiqan to'g'ri bo'ladi.

Biroq, narsalar boshqacha. Aslida, bunday vaziyatda elementlarning ikkita qo'shni maydonidan eng katta o'lcham tanlanganda qulash deb ataladigan effekt paydo bo'ladi. Bizning misolimizda elementlar orasidagi yakuniy bo'shliq 60 piksel bo'ladi.

Bloklar orasidagi masofa kattaroq qiymatga teng

Yig'ish chegarasi faqat elementlarning yuqori va pastki chetlari uchun ishlaydi va o'ng va chap tomonlardagi chekkalarga taalluqli emas. Yakuniy bo'shliq qiymati turli holatlarda turlicha hisoblanadi:

• Ikkala chegara qiymati ham ijobiy bo'lsa, natijada olingan marja kattaligi kattaroq qiymatga teng bo'ladi.
• Agar qiymatlardan biri salbiy bo'lsa, maydon hajmini hisoblash uchun siz qiymatlar yig'indisini olishingiz kerak. Masalan, 20px va -18px qiymatlari bilan maydon hajmi quyidagicha bo'ladi:
  20 + (-18) = 20 – 18 = 2 piksel.
• Agar ikkala qiymat ham manfiy bo'lsa, bu raqamlarning modullari solishtiriladi va moduli katta bo'lgan raqam (shuning uchun manfiy raqamlardan kichikroq) tanlanadi. Misol: -6px va -8px maydonlarining qiymatlarini solishtirish kerak. Taqqoslanayotgan raqamlarning modullari mos ravishda 6 va 8 ga teng. Bundan kelib chiqadiki, 6-8. Olingan maydon hajmi -8 piksel.
• Agar qiymatlar ko'rsatilgan bo'lsa turli birliklar CSS, ular bittaga qisqartiriladi, shundan so'ng ular taqqoslanadi va kattaroq qiymat tanlanadi.
• To'liq elementlar uchun chekka o'lchami yanada qiziqarli tarzda aniqlanadi: agar bolaning ota-onasiga qaraganda kattaroq chegarasi bo'lsa, u holda unga ustunlik beriladi. Bunday holda, ota-onaning yuqori va pastki chetlarining o'lchamlari bola uchun belgilanganlari bilan bir xil bo'ladi. Bunday holda, ota-ona va bola o'rtasida masofa bo'lmaydi.

Chegara va toʻldirish HTML sahifasini yaratishda juda muhim uslubdir. Ular sizga elementlarni aniqroq joylashtirishga, kerakli bo'shliqlar bilan ramka yaratishga imkon beradi va hokazo. Ikkala uslub ham juda o'xshash va o'xshash funktsiyalarni bajaradi. Ammo hali ham farqlar mavjud.

Elementlar ichki yoki bir-birining yonida joylashgan bo'lishi mumkin. Keling, quyidagi misolni ko'rib chiqaylik:

Bizda ikkita stol bor, limon va ko'k, birining ostida joylashgan. Jadvallar bitta hujayradan iborat. Birinchi jadval katakchasida qizil blok mavjud. Ushbu misoldan foydalanib, keling, chekka va chekinishlar qanday ishlashini ko'rib chiqaylik.

Maydonlar uslub bo'yicha o'rnatiladi to'ldirish. Ushbu uslub faqat boshqa elementlarni o'z ichiga olishi mumkin bo'lgan konteyner elementlari uchun amal qiladi. Uslub elementning qirralari va uning mazmuni orasidagi chegarani o'rnatishga imkon beradi. Uslub marja elementdan boshqa elementning eng yaqin chegaralariga chekinishlarni o'rnatishga imkon beradi. Boshqa elementning chegaralari asosiy konteynerning chegaralari, shuningdek, sahifaning o'zi bo'lishi mumkin.

Ushbu uslublarni o'rnatishning bir necha yo'li mavjud. Masalan, ba'zi bir o'lchov birligida (px, ex, em, pt, sm va boshqalar) bitta argument bilan barcha chekka yoki chekinishlarning o'lchamini to'g'ridan-to'g'ri belgilang:

to'ldirish: 3px; chekka: 3px;

Bunday holda, chekka va chekinishlar to'rt tomondan bir xil bo'ladi. Bo'sh joy bilan ajratilgan ikkita argumentni belgilashda:

to'ldirish: 3px 5px; chegara: 3px 5px;

birinchisi yuqori va pastdagi, ikkinchisi - chap va o'ngdagi chekka/chekinishlar miqdorini aniqlaydi. Uchta argument berilganda:

to'ldirish: 3px 5px 2px; chegara: 3px 5px 2px;

birinchisi - yuqoridagi chekka/chekinish, ikkinchisi - chap va o'ng, uchinchisi - pastda. To'rtta dalil bilan:

to'ldirish: 3px 5px 2px 6px; chekka: 3px 5px 2px 6px;

birinchisi tepada marj/bo'shliq, ikkinchisi o'ngda, uchinchisi pastda, to'rtinchisi chapda. Buni eslab qolish oson: birinchisi yuqoridan, keyin soat yo'nalishi bo'yicha. Bunga qo'shimcha ravishda, tegishli uslublardan foydalanib, ma'lum bir chekka uchun chekka va to'ldirishni alohida o'rnatishingiz mumkin: to'ldiruvchi-usti, to'ldirish - o'ng, to'ldirish - pastki, to'ldirish - chap, chekka tepa, chekka o'ng, chekka-pastki, chekka-chap. Ushbu uslublarning qiymati faqat bitta argument bo'lishi mumkin, bu ma'lum bir tomon uchun chekka/to'ldirish miqdorini belgilaydi.

Rasmda qizil blok jadval katakchasi ichida va uning chegaralariga ulashgan, ya'ni katakchada chekkalar yo'q. Uslubdan foydalanib, hujayra chetlarini o'rnatamiz:

to'ldirish: 5px;

Natijada, sahifa quyidagiga o'zgaradi:

Endi chekinishlarni ko'rib chiqaylik. Ikki jadval bir-biriga ulashgan, agar biz ularni bir oz uzoqroqqa joylashtirmoqchi bo'lsak, biz chekinishlarni qo'llashimiz mumkin. Bu erda ikkita variant mavjud: birinchi jadvalning pastki chegarasini yoki ikkinchi jadvalning yuqori chegarasini o'rnating. Keling, ikkinchisidan foydalanamiz:

tepadan chet: 5px;

Iltimos, biz chekinishni maydonlarda bo'lgani kabi jadval katakchasiga emas, balki jadvalga o'rnatganimizni unutmang. Mana natija:

Aytgancha, birinchi holatda (qizil blok va ota-ona hujayra chegaralari orasidagi bo'shliq), xuddi shunday ta'sirga blok chekinishlarini o'rnatish orqali erishish mumkin edi. Umuman olganda, agar biror narsa aniq bo'lmasa, izohlarda bizga xabar bering.

Tajriba sahifasining HTML kodi:

<html > <bosh > <sarlavha > Sinov</title> <meta http-equiv = "Content-Type" kontenti = "text/html;charset=utf-8" > </head> <tanasi > <uslub > jadval (kengligi: 200px; balandlik: 150px; hoshiya: 1px qattiq #555; chegarani yigʻish: yigʻish) td (vertikal tekislash: tepa; toʻldirish: 0px) div (kenglik: 100px; balandlik: 100px; fon: qizil)</style> <stol uslubi = "fon: ohak" > <tr > <td uslubi = "to'ldirish: 5px" > <div uslubi = "margin: 0px" ></div> </td> </tr> </jadval> <stol uslubi = "fon: osmon ko'k; chekka tepa: 5px"> <tr > <td ></td> </tr> </jadval> </tana> </html> To'ldiruvchi ustki

Umid qilamanki, siz blokning tuzilishi bilan allaqachon tanishsiz. Agar yo'q bo'lsa, u quyida keltirilgan.

Blok tuzilishi

Shunday qilib. Blokning chetlari va chekkalari mos ravishda to‘ldirish va chekka xossalari bilan ifodalanishini allaqachon bilgan bo‘lsangiz kerak. Va oldingi maqolada biz bu mavzuga qisman to'xtalib o'tdik. Ushbu sahifada biz maydonlarni batafsil ko'rib chiqamiz ( to'ldirish) va to'ldirish ( marja ).

Marja va to'ldirish xususiyatlari bir-biriga juda o'xshash va o'xshash funktsiyalarni bajaradi, shuning uchun ular ko'pincha chalkashtirib yuboriladi. Lekin, albatta, buni qilmaslik kerak, chunki chekka va chekinishlar butunlay boshqacha narsalardir. Biroq, bu rasmdan aniq ko'rinadi, chunki bu erda ko'rsatilishi tasodif emas.

Shunday qilib. Chegaralar to'ldirish xususiyati bilan belgilanadi. Bu blok chegaralaridan uning tarkibigacha bo'lgan ichki masofalar.

Xususiyat barcha elementlarga tegishli.

Masofa CSS uzunlik birliklarida, % yoki (( standart

Padding xususiyati universaldir, chunki u element chegaralaridan uning barcha tomonlari uchun uning mazmunigacha boʻlgan chegaralarni oʻrnatadi va shu bilan padding-top , padding-right , padding-bottom va padding-left xossalarini birlashtiradi, ular kengligini belgilaydi. har bir yon element uchun alohida chegaralar.

Chegirmalar blok chegaralaridan eng yaqin elementlargacha yoki brauzer oynasining chetlarigacha bo'lgan masofani aniqlaydigan margin xususiyati yordamida o'rnatiladi.

Margin xususiyati barcha elementlarga ham tegishli.

Toʻldirish CSS uzunlik birliklarida ham koʻrsatilgan, % yoki ( standart) brauzer tomonidan avtomatik ravishda aniqlanadi.

Margin xossasi universaldir, chunki u element chegaralaridan uning barcha tomonlari uchun chekinish miqdorini belgilaydi, shu bilan margin-top , margin-right , margin-bottom va margin-left xususiyatlarini birlashtiradi, bu esa chekinishlar kengligini belgilaydi. elementning har bir chegarasidan alohida.

Va yana bir narsa: chekinishlar ( marja) blokdan tashqarida joylashgan, chetlari esa ( to'ldirish) uning ichida, shuning uchun blokning foni yoki u fon tasviri faqat chekkalarga qo'llaniladi va chekinishlar har doim shaffof yoki asosiysining foniga ega ( ota-ona) blok yoki sahifa foni.

Kod parchasi: