Elementning har bir chetidan to'ldirish miqdorini o'rnatadi. Marja - joriy elementning chegarasidan uning asosiy elementining ichki chegarasigacha bo'lgan bo'shliq (1-rasm).
Guruch. 1. Elementning chap chetidan chekinish
Agar elementda ota-ona bo'lmasa, to'ldirish elementning chetidan brauzer oynasining chetigacha bo'lgan masofa bo'ladi, bu oynaning o'zida ham sukut bo'yicha o'rnatilgan to'ldirishga ega ekanligini hisobga oladi. Ulardan xalos bo'lish uchun siz selektor uchun chegara qiymatini belgilashingiz kerak
nolga teng.Margin xususiyati bir vaqtning o'zida elementning barcha tomonlari uchun chegara qiymatini belgilash yoki uni faqat belgilangan tomonlar uchun belgilash imkonini beradi.
chekka: [qiymat | qiziqish | avto] (1,4) | meros
Siz bo'sh joy bilan ajratilgan bitta, ikki, uch yoki to'rtta qiymatdan foydalanishingiz mumkin. Ta'sir qiymatlar soniga bog'liq va jadvalda ko'rsatilgan. 1.
Chekish miqdori piksel (px), foiz (%) yoki CSS uchun maqbul bo'lgan boshqa birliklarda ko'rsatilishi mumkin. Qiymat ijobiy yoki salbiy son bo'lishi mumkin.
Avtomatik chekinish hajmi brauzer tomonidan avtomatik ravishda hisoblanishini bildiradi. inherit Ota-ona qiymatini meros qilib oladi.
HTML5 CSS2.1 IE Cr Op Sa Fx
Natija bu misol shaklda ko'rsatilgan. 2.
Guruch. 2. Marja xossasini qo‘llash
document.getElementById("elementID ").style.margin
Internet Explorer 6 moslik rejimida (qizil rejim) blokni chekkadan foydalanib markazlashtirishni qo'llab-quvvatlamaydi: 0 avtomatik qoida. Shuningdek, ushbu brauzerda asosiy elementlar ichida joylashgan suzuvchi elementlar uchun chap yoki o'ng to'ldirish qiymatini ikki baravar oshirish bilan bog'liq xatolik mavjud. Ota-ona tomoniga ulashgan chekka ikki baravar ko'payadi. Muammo odatda suzuvchi elementga displey: inline qo'shish orqali hal qilinadi.
7.0 ga qadar va shu jumladan Internet Explorer versiyalari meros qiymatini qo'llab-quvvatlamaydi.
U blok elementlari vertikal ravishda bir-birining yonida joylashgan bo'lib, indentlar yig'ilmaganda, balki bir-biri bilan birlashtirilganda yiqilish effekti kuzatiladi. Yiqilishning o'zi ikki yoki undan ko'p bloklarda ishlaydi (biri ikkinchisining ichiga joylashtirilishi mumkin) tepada yoki pastda chuqurchaga ega, qo'shni bo'shliqlar esa bittaga birlashtiriladi. Chap va o'ng to'ldirish uchun siqilish hech qachon qo'llanilmaydi.
Yig'ish ishlamaydi:
Bugun biz siz bilan tartib tamoyillari, ya'ni saytingizda ma'lum elementlar uchun chekinishni tashkil qilish usullari haqida bir oz gaplashamiz.
Ko'rib chiqilayotgan element matn, rasm, jadval yoki boshqa HTML elementi bo'lishi mumkin. Asosiysi, ba'zilariga amal qilish muhim qoidalar, bu haqda hozir gaplashaman.
Agar siz hozirgina saytingizni yaratayotgan bo'lsangiz, asosiy uslub faylingizning yuqori qismiga quyidagi xususiyatlarni kiritishingizni tavsiya qilaman:
* ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; ) *:oldin, *:after ( -webkit-box-sizing: border- box; -moz-box-sizing: border-box: border-box )
Nima uchun bu kerak, deb so'rayapsizmi? Men sizning savolingizga aniq misol bilan javob beraman.
Aytaylik, sizda shunday tartib elementi bor:
Yuqorida tavsiflangan xususiyatlardan foydalanmasdan (yuqori element) va ulardan foydalanishda (pastki element) variant shunday ko'rinadi:
Bu yerda nimani ko'rish mumkin? Birinchi versiyadagi elementning kengligi (xususiyatlardan foydalanmasdan) qo'shilgan chekinishlar tufayli ko'rsatilganidan kattaroq bo'lganligi, bu tartib jihatidan mutlaqo qulay va to'g'ri emas.
Xususiyatlari bo'lgan variant ancha estetik jihatdan yoqimli, lekin siz undan ongli ravishda foydalanishingiz kerak, chunki ularni tayyor saytga qo'shsangiz, siz yomon dizayn va barchasini to'g'ri shaklga keltirish shaklida "bosh og'rig'i" ga duch kelishingiz mumkin. . Men noldan boshchilik qilish imkoniyatiga ega bo'lgan barcha loyihalar bu xususiyatlardan xoli emas edi.
Va endi, aslida, vizual misollar bilan veb-saytingizdagi elementlar uchun chegaralarni tashkil qilish variantlari haqida gapiraylik.
Narsalarning to'liq mantig'ini tushunishingiz uchun, keling, quyidagi sxema bo'lagini misol qilib olaylik:
o'z uslublaringiz bilan:
Test_div (kengligi: 250px; chegara: 1px qattiq; )
Vizual versiya quyidagicha ko'rinadi:
mulk nima " to'ldirish"? Bu ko'rsatilgan elementlarda ichki chiziqni tartibga solishga yordam beradi. Keling, sxemamizga 10px ichki to'ldirishni qo'shamiz:
Test_div (kenglik: 250px; chegara: 1px qattiq; toʻldirish: 10px; // 10px toʻldirish)
Vizual ravishda u quyidagicha ko'rinadi:
Xususiyatdagi 10 raqami ko'rsatilgan elementlarning ichida, ularning to'rt tomonining har birida 10px chegara qo'shish kerakligini anglatadi. Piksellar (px) foizlar yoki boshqa CSS qo'llab-quvvatlanadigan qiymatlar bilan almashtirilishi mumkin.
Ikkita variant mavjud chekinish kerak bo'lgan tomonlarning ko'rsatkichlari.
Birinchidan- bu tomonlarning aniq ko'rsatilishi bilan:
To'ldiruvchi ustki: 10px; // 10px yuqori toʻldirish-oʻng: 10px; // 10px oʻng tomondagi toʻldirish-pastki: 10px; // Ichki to'ldirish 10px pastki to'ldirish-chapdan: 10px; // 10px chap toʻldirish
Bunday holda, har bir tomon o'z mulkidan foydalanadi. VA ikkinchi:
To'ldirish: 10px 0 0 0; // Yuqorida ichki to'ldirish 10px, qolgan hamma narsa - 0px to'ldirish: 10px 0; // Yuqorida va pastda ichki to'ldirish 10px, yon tomonlarda esa - 0px to'ldirish: 0 10px; // Ichki to'ldirish yuqori va pastda 0px, yon tomonlarda 10px
Mana, qiymatlarning oddiy ro'yxati, ularning har biri o'z tomoniga mos keladi. Yon tomonlari shunday o'rnatiladi: birinchi qiymat tepada, ikkinchisi o'ngda, uchinchisi pastda va to'rtinchisi chapda, ya'ni hamma narsa soat yo'nalishi bo'yicha.
Agar ikkita qiymat (yuqori va o'ng) bo'lsa, bu oynada bir xil qiymatlar pastga va chapga tushishini anglatadi va bu yagona yo'l. Hamma narsa aniq ko'rinadi. Agar tomonlardan biriga chekinish kerak bo'lmasa, bu tomon uchun qiymatni "0" ga qo'ying. Menga bu variant ko'proq yoqadi, chunki u ixchamroq, lekin men birinchi variantni ishlatganman.
Ushbu turdagi chekinish matnni, jadval katakchalari tarkibini va boshqa matn ma'lumotlarini ajratish uchun yaxshi. Yuqoridagi misoldagi kabi elementlarning o'zlarini ajratish uchun yana bir xususiyat mavjud.
Mulkning o'ziga xos xususiyati " marja" chekinish elementdan tashqarida, ya'ni tashqi tomondan qo'shilganligini bildiradi.
Bu erda qo'shish uchun ikkita variant ham mavjud.
Birinchidan- partiyani aniq ko'rsatgan holda:
Tepaning cheti: 10px; // Yuqori chetdagi 10px chekka-oʻng: 10px; // 10px chekka o'ng chekka-pastki: 10px; // Pastki chetdan 10px chetidan-chapdan: 10px; // 10px chap chekka
Ikkinchi- har biri o'z tomoniga mos keladigan qiymatlar ro'yxati bilan:
Chegara: 10px 0 0 0; // Tashqi chekka 10px tepada, qolgan hamma narsa - 0px chet: 10px 0; // Yuqorida va pastda 10px, yon tomonlarda esa - 0px chekka: 0 10px; // Tashqi to'ldirish yuqori va pastki 0px va yon tomonlarda 10px
Men bu erda qoidalar bilan ishlashning barcha nuanslarini tasvirlamayman, hamma narsa mulk bilan bir xil " to'ldirish", u haqida yuqorida yozilgan.
Biz marjni quyidagi qiymat bilan ishlatamiz:
Test_div (kengligi: 250px; hoshiya: 1px qattiq; cheti: 10px; // 10px )
Vizual ravishda u quyidagicha ko'rinadi:
Misoldan ko'rinib turibdiki, bu holda ko'rsatilgan elementlarni ajratish uchun tashqi chegara qo'shiladi.
Muhim xususiyat: Agar siz natijaga diqqat bilan qarasangiz, elementlarning qoʻshni boʻgʻinlari qoʻshilmasligini payqagan boʻlishingiz mumkin. Ya'ni, agar birinchi elementning pastki cheti 10px ga teng bo'lsa va ikkinchi element bir xil qiymatga ega bo'lgan yuqori chetiga ega bo'lsa, u holda umumiy masofa ular orasida ham 10px ga teng bo'ladi. Agar mos ravishda 10 va 15 bo'lsa, jami 15 va hokazo.
Ushbu chekinish varianti ko'pincha matnda, ya'ni paragraflarni loyihalashda, shuningdek ko'rinadigan chegaralarga ega elementlarda qo'llaniladi.
Ammo ikkala xususiyat faqat ushbu elementlar bilan cheklanmaydi. Siz ulardan foydalanish variantlarini o'zingiz tanlaysiz, men faqat ular haqida asosiy ma'lumotlarni berishga harakat qildim.
Veb-sahifadagi elementlarni yanada chiroyli ko'rsatish uchun CSS-da tashqi va ichki chegaralar qo'llaniladi va biz buni misollar yordamida ko'rib chiqamiz.
Har bir element, xoh u paragraf, div, rasm yoki video bo'lsin, blokning bir turi bo'lib, unda siz to'ldirish xususiyatidan foydalanib, ichkarida ham, margin yordamida tashqarida chekinishlar qilishingiz mumkin.
CSS-da chekinish uchun ushbu xususiyatlar shu tarzda yozilgan (misol sifatida paragraf olingan):
P yorlig'i o'rniga siz o'zingizning elementingizni yozasiz, albatta, buning uchun chekinish qo'llaniladi.
Chegara va to'ldirish parametrlari uchun har bir tomon uchun indentlarning qurilishi bir xil ekanligini tushunish va esda tutish juda muhimdir.
Ya'ni, har bir chiziqda 4 ta qiymat mavjud:
Chiziq qiymatlari.
Ushbu misolda men CSS-da chetning tashqi chegarasini shunday qildim: tepada 20px, chap va o'ngda 10px (odatda ular simmetriya uchun bir xil bo'ladi) va pastki qismida 30px yozdim.
Va to'ldirish uchun men belgilab qo'ydim: tepada, chapda va o'ngda 10 piksel va pastda 14 piksel.
Chekka va toʻldirish xususiyatlaridagi chekinishlar qiymati, agar ular bir xil oʻlchamda boʻlsa, kamaytirilishi mumkin.
Mening misolimdan qisqartirilgan belgi quyidagicha ko'rinadi:
Ya'ni, oxirgi raqamli yozuv yo'qolganda, in Ushbu holatda chap chekinish uchun brauzer avtomatik ravishda chap chekinish uchun bir xil qiymatni o'ngdagi qiymat bilan almashtiradi.
Va mening holatimda, o'ng va chapdagi chekkalar ham chekka, ham to'ldirishda 10px bo'ladi.
Va agar sizda yuqori va pastdagi chegaralar uchun bir xil qiymatlar mavjud bo'lsa (masalan: 16px) va chap va o'ngdagi chekkalar uchun bir xil qiymatlar (masalan: 20px), u holda yozuv bo'ladi. yanada qisqartirilgan shaklga ega:
Shunga ko'ra, ichki to'ldirish uchun css kirish bu bilan bir xil tarzda bajarilgan.
Yagona chekinishlarni qo'llash: har bir tomon uchun alohida.
Individual cheklovni belgilash uchun quyidagi yagona qiymatli xususiyatlardan foydalaniladi:
Har bir tomon uchun xossalarni belgilang.
Ichki chekinishlar uchun yozuvlar xuddi shu tarzda yoziladi, faqat siz chetni to'ldirish bilan almashtirishingiz kerak.
Masalan, barcha img rasmlari uchun sizda CSS-da yozilgan barcha chekinishlar mavjud.
Ya'ni (aniqlash uchun) tashqi chegara quyidagi qiymatlarga ega: tepada 10px, chap va o'ngda 20px va pastda 14px.
Va ichki plomba barcha 4 tomondan 6px.
Aytaylik, siz sahifaga boshqa rasm qo'yishga qaror qildingiz, lekin buning uchun siz faqat yuqoridagi tashqi chetni o'zgartirmoqchisiz, qolganini esa shunday qoldirmoqchisiz. Va bu vazifani bajarish uchun ushbu rasm uchun sinfni ro'yxatdan o'tkazish va CSS-ga qo'shimcha yozuv qo'shish kifoya.
Natijada, siz verx klassi bilan qo'shgan rasm img tegi uchun CSS da ko'rsatilgan barcha to'ldirishni qabul qiladi va faqat yuqori tomon uchun tashqi to'ldirishni o'zgartiradi (bizning holimizda: 40px).
Men CSS indents tavsifini batafsilroq qilishga harakat qildim, lekin agar sizda biron bir savol bo'lsa, ularni sharhlar orqali so'rang.
Elementning o'ng chetidan chekinish miqdorini o'rnatadi. Plomba - joriy elementning o'ng chegarasining tashqi chetidan uning asosiy elementining ichki chegarasigacha bo'lgan masofa (1-rasm).
chekka o'ng: qiymat | avto | meros
To'g'ri to'ldirish miqdori piksel (px), foiz (%) yoki CSS uchun maqbul bo'lgan boshqa birliklarda ko'rsatilishi mumkin. Qiymat ijobiy yoki salbiy son bo'lishi mumkin.
Avtomatik chekinish hajmi brauzer tomonidan avtomatik ravishda hisoblanishini bildiradi. inherit Ota-ona qiymatini meros qilib oladi.
HTML5 CSS2.1 IE Cr Op Sa Fx
Ushbu misolning natijasi rasmda ko'rsatilgan. 2.
Guruch. 2. Margin-right xususiyatini qo'llash
document.getElementById("elementID ").style.marginRight
Internet Explorer 6 asosiy elementlar ichida joylashgan suzuvchi elementlar uchun chap yoki o'ng chegarani ikki baravar oshiradi. Ota-ona tomoniga ulashgan chekka ikki baravar ko'payadi. Muammo odatda suzuvchi elementga displey: inline qo'shish orqali hal qilinadi.
7.0 ga qadar va shu jumladan Internet Explorer versiyalari meros qiymatini qo'llab-quvvatlamaydi.
Veb-resurs foydalanuvchilar tomonidan vizual jozibadorligiga qarab baholanadi. Shuning uchun, hatto ma'lumot uchun foydali bo'lgan matn ham yomon ishlab chiqilganligi sababli o'qilmasligi mumkin. Xulosa - siz nafaqat sayt sahifalarining semantik tarkibiga, balki uning vizual taqdimotiga ham diqqat bilan va diqqat bilan yondashishingiz kerak. CSS texnologiyasining paydo bo'lishi jozibali maqolalar yaratish imkoniyatlarini kengaytirdi. Yozilgan narsalarni o'qishni osonlashtirish uchun mo'ljallangan xususiyatlardan biri bu chekinishdir. CSS matni.
Matnni formatlashni boshlashdan oldin, chekka va chekinishlar nima ekanligini tushunishingiz kerak. Ushbu belgilash elementlari ba'zi hollarda foydalanuvchi uchun bir xil ko'rinishiga qaramay, ular o'rtasida tub farqlar mavjud:
Shunday qilib, CSS matnining gorizontal yoki vertikal chegarasini o'rnatish uchun konstruktsiyadan foydalaning marja. Bu xususiyat teg uchun amal qiladi hujjatning bandini belgilash. Eng oddiy holatda u quyidagicha yoziladi:
chegara: 12px.
Bu satr matn bloki (yoki boshqa har qanday blok) atrofida har tomondan 12 pikselli chekinish bo'lishini bildiradi. Intervalni, masalan, uch marta oshirish uchun, shunchaki yozing:
chegara: 36px.
Ammo bloklar orasidagi interval har tomondan har xil bo'lishi kerak bo'lsa-chi? Veb-sahifa ishlab chiquvchilari yozishning bir necha shakllaridan foydalanadilar:
Birinchi misolda blokning pastki va yuqori chegaralaridan 11 piksel, yon tomonlarida esa 22 piksel chekinish qilinadi. Yozuvning ikkinchi shakliga ko'ra, orasida yuqori cheti blok va kontent 11 piksel, pastki orasida - 33 piksel, yon tomonlarda - 22 piksel bo'ladi. Uchinchi holatda, to'ldirish yuqorida 11 piksel, o'ngda 22 piksel, pastda 33 piksel va chapda 44 piksel bo'ladi.
Blok chegarasigacha bo'lgan masofani faqat bir tomondan qayd etish ham mumkin: chekka-yuqori, chet-pastki, chekka-chap, chekka-o'ng. Mulk nomlarini rus tiliga tarjima qilish orqali ularning maqsadini taxmin qilish oson. Misol uchun, quyidagi yozuvda o'ng chegara 22 piksel bo'lishi aytiladi:
chekka o'ng: 22px.
Boshqa tomonlar uchun blok atrofidagi masofalar olinadi qiymatiga teng asosiy element.
Mulk marja CSS matni vertikal chegarasidan foydalanganda ishlab chiquvchi yodda tutishi kerak bo'lgan xususiyatga ega. Qo'shni elementlarning intervallari umumlashtirilmaydi, balki bir-biriga o'rnatiladi. Misol uchun, bloklardan biriga ega bo'lsin pastki chet: 15px, va quyida unga ulashgan blok yuqori chet: 35px. Maktab arifmetikasi va sog'lom fikr ular orasidagi umumiy bo'shliq 50 piksel bo'lishini ko'rsatadi. Amalda esa bunday emas. Yuqori mulk qiymatiga ega blok marja qo'shnisini "singdirib oladi". Natijada, elementlar orasidagi masofa 35 piksel bo'ladi.
Hujjatni rasmiylashtirish matn muharriri, foydalanuvchilar "qizil" chiziq yordamida har bir yangi paragrafni belgilashni afzal ko'radi. BILAN CSS yordamida chapdagi matnni kiritish oson - konstruktsiya ishlatiladi matn chegarasi. Bu shunday yozilgan:
matn chegarasi: 11px.
Ya'ni, paragrafning birinchi qatori chap chetiga nisbatan 11 pikselga siljiydi. Veb-sahifadagi matnni muharrirdagi hujjatga o'xshash qilish uchun siz qo'shimcha ravishda o'rnatishingiz kerak, ya'ni:
matn chegarasi: 11px;
matnni tekislash: oqlash.
Belgilarni tavsiflashda piksellardan tashqari, boshqa birliklardan - dyuymlardan, nuqtalardan, foizlardan foydalanishga ruxsat beriladi. Blokda 10% CSS matn to'plamiga ega bo'lsin. Blok kengligi 500 piksel bo'lsa, qizil chiziq 50 piksel (500 dan 10%) bo'ladi.
Bu xususiyat sozlanishi mumkin meros. Ushbu yozuv blokda asosiy blokning o'xshash xususiyatidan foydalanishi aytiladi.
matn-indent: meros.
Ajablanarlisi shundaki, u salbiy qiymatlarni ham qabul qilishi mumkin! Bunday holda, ortiqcha deb ataladigan narsalar hosil bo'ladi, ya'ni asosiy matn joyida qoladi va birinchi qator chapga 22 pikselga siljiydi:
matn chegarasi: -22px.
Harflarning brauzerning chap chegarasidan tashqariga chiqishini oldini olish uchun, bundan tashqari matn chegarasi maydonni o'rnatish uchun qurilishdan foydalanishingiz kerak:
to'ldirish-chap: 22px.
Asosiy CSS xususiyatlari ko'rib chiqish uchun. Va amaliyot ularni mustahkamlashga yordam beradi. O'rganganlaringizni veb-saytingizni ishlab chiqishda qo'llash bo'yicha ba'zi yakuniy maslahatlar:
