CSS to'ldirish CSS box modelining xususiyatlaridan biridir. Ushbu stsenariy xususiyati HTML elementining to'rt tomonining atrofida to'ldirishni o'rnatadi. CSS to'ldirishi deyarli har bir HTML tegiga (ba'zi jadval belgilaridan tashqari) qo'llanilishi mumkin. Bundan tashqari, elementning barcha to'rt tomonida boshqa qiymat bo'lishi mumkin.
CSS to'ldirish xususiyati
Shorthand CSS padding xususiyatini ishlatish uchun siz "moziq" TRouBLe (yoki "Star Trek" muxlislari uchun "TRiBbLe") dan foydalanishingiz mumkin. Bu yuqoridagi , o'ng , pastki va chapdan iborat bo'lib , u stenografiya xususiyatiga kiritilgan padding kengliklari tartibiga ishora qiladi. Masalan:
to'ldirish: o'ng pastki chap; to'ldirish: 1px 2px 3px 6px;Agar siz yuqorida sanab o'tilgan qiymatlardan foydalangan bo'lsangiz, siz qo'llayotgan HTML elementingizning har bir tomoniga turli xil to'ldirish qiymati qo'llaniladi. Agar bir xil to'ldirishni to'rt tomonga qo'llashni istasangiz, siz CSS-ni soddalashtirasiz va faqat bitta qiymatni yozasiz:
to'ldirish: 12px;CSS-ning ushbu satri bilan elementning barcha 4 tomoniga 12 ta pikselli plomba qo'llaniladi.
Yuqori va pastki va chap va o'ng uchun to'ldirishni bir xil bo'lishini istasangiz, siz ikki qiymat yozishingiz mumkin:
to'ldirish: 24px 48px;Birinchi qiymat (24px) yuqoriga va pastga, ikkinchisi esa chap va o'ngga tegishlidir.
Agar siz uchta qiymatni yozsangiz, u gorizontal paddingni (chap va o'ng) bir xilga keltiradi, yuqoriga va pastga almashinadi:
to'ldirish: yuqori o'ng va chap pastki; to'ldirish: 0px 1px 3px;CSS-quti modeliga ko'ra, to'ldirish element / tarkibga yaqin bo'ladi. Bu shuni bildiradiki, to'ldirish kontent kengligi yoki balandligi va foydalanadigan chegara qiymatlari orasidagi elementga qo'shiladi degan ma'noni anglatadi. Agar to'ldirish nolga o'rnatilgan bo'lsa, u tarkibga bir xil chekkaga ega.
CSS to'ldirish qiymati
CSS to'lg'azish salbiy bo'lmagan uzunlik qiymatini qabul qilishi mumkin. Px yoki em kabi o'lchovlarni aniqlang. Bundan tashqari, to'ldirishingiz uchun foizni belgilashingiz mumkin, bu element tarkibidagi blokning kengligi foiziga teng bo'ladi. Bunga yuqori va pastki to'lg'azish kiradi. Masalan:
# Container {kenglik: 800px; balandligi: 200px; } # konteyner p {kenglik: 400px; balandligi: 75%; to'ldirish: 25% 0; }# Container elementi ichidagi xatning balandligi #containerning balandligining 75 foizini, shuningdek, yuqori to'ldirish uchun 25 foizni va pastki to'ldirish uchun 25 foizli kenglikni oladi. Bu 300 + 200 + 200 = 700px qiymatini tashkil etadi.
CSS to'ldirishni qo'shish effektlari
Blok-darajadagi elementlarda to'ldirgich to'rt tomonga qo'llaniladi. Element allaqachon blok yoki quti bo'lgani uchun, to'ldirish quti tomonlariga qo'llaniladi.
CSS bo'shlig'ining satr ichidagi elementlarga qo'shilganda vertikal to'lg'azish chiziq balandligidan kattaroq bo'lsa, satr satrining balandligi pastga tushmasa, ichki elementning yuqorisida va pastida ba'zi bir ketma-ketliklar bo'lishi mumkin. Inline elementlarga qo'llaniladigan gorizontal CSS to'ldiruvchisi elementning boshiga va elementning oxiriga qo'shiladi. Va to'lg'azish chiziqlarni kesishi mumkin. Biroq, bu ko'p satrli elementning barcha satrlariga taalluqli emas, shuning uchun ko'p satrali satr ichidagi kontentning segmentini kiritish uchun to'ldirishni ishlatolmaysiz.
Bundan tashqari, CSS2.1-da, kenglik kenglik (yoki to'lg'azish kengliklari) uchun foizli elementga bog'liq konteyner bloklarini yaratolmaysiz. Agar natijani aniqlasangiz, aniqlanmagan. Brauzerlar hali ham tarkibni namoyish qiladilar, ammo siz kutgan natijalarni olishingiz mumkin emas. Agar siz bu haqda o'ylayotgan bo'lsangiz, sizning konteyneringiz elementi o'zining kengligini aniqlab olish uchun bolaning elementlari kengligini bilishi kerak, masalan, oldindan aniqlangan kengligi bo'lmaganida va bir yoki undan ko'proq kenglik konteyner elementining ulushi sifatida belgilanadi, bu esa hech qanday javobsiz dumaloq zanjirni o'rnatadi. Hujjatlaringizdagi kengliklarning foizlari uchun foydalansangiz, ota-element kengliklarining ham aniqlanganligiga ishonch hosil qilishingiz kerak.