Salom, aziz blog o'quvchilari! Bugun biz kaskadli uslublar jadvallari yoki CSS haqida o'rganishni davom ettiramiz. Oldingi maqolalarda biz allaqachon umumiy ma'noda saytning blok tartibini ko'rib chiqdik. Natijada, bizda juda professional veb-sahifalar paydo bo'ldi, ammo ularda nimadir etishmayotgan edi. Ammo ularda chuqurchalar va ramkalar yo'q. Bugun biz html elementlari uchun chekinishlar va ramkalar o'rnatish imkonini beruvchi chekka, to'ldirish va chegara uslubi qoidalarini ko'rib chiqamiz.
Kaskadli uslublar jadvallari yordamida ikki turdagi chekinishlarni o'rnatish mumkin.
1.Chiziq- elementning xayoliy chegarasidan uning mazmunigacha bo'lgan masofa. Masofa qiymati parametr yordamida aniqlanadi to'ldirish. Ushbu chekinish elementning o'ziga tegishli va uning ichida joylashgan.
2. Marja— veb-sahifaning joriy elementi chegarasi bilan qo'shni elementlar yoki asosiy element chegaralari orasidagi masofa. Masofaning o'lchami mulk tomonidan nazorat qilinadi marja. Ushbu chekinish elementdan tashqarida joylashgan.
Aniqlik uchun rasm:
Misol uchun, matn bilan to'ldirilgan katakchani ko'rib chiqing. Keyin to'ldirish katakning xayoliy chegarasi va unda joylashgan matn orasidagi masofadir. Va tashqi chegara qo'shni hujayralar chegaralari orasidagi masofa. To'ldirish bilan boshlaylik.
padding-left, padding-top, padding-right va padding-bottom uslubi xususiyatlari sizga veb-sahifa elementining chap, yuqori, o'ng va pastki qismidagi to'ldirish qiymatlarini o'rnatish imkonini beradi:
padding-top | padding-o'ng | padding-bottom | padding-left: qiymat | qiziqish | meros
Chekish miqdori piksel (px), foiz (%) yoki CSS uchun maqbul bo'lgan boshqa birliklarda ko'rsatilishi mumkin. Foizlarni belgilashda qiymat elementning kengligidan hisoblanadi. Meros qiymati uning ota-onadan meros ekanligini ko'rsatadi.
Misol uchun, joriy paragraf uchun men chap to'ldirishni 20 pikselga, yuqori to'ldirishni 5 pikselga, o'ng to'ldirishni 35 pikselga va pastki to'ldirishni 10 pikselga o'rnatadigan uslub qoidasini qo'lladim. Qoida yozuvi quyidagicha ko'rinadi:
p.test(
padding-chap: 20px;
to'ldirish tepasi: 5px;
to'ldirish-o'ng: 35px;
to'ldirish-pastki: 10px
}
Kompozit to'ldirish qoidasi veb-sahifa elementining barcha tomonlarida bir vaqtning o'zida chekinishlarni belgilash imkonini beradi:
to'ldirish:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]
Prefabrik qoida bo'sh joy bilan ajratilgan bir, ikki, uch yoki to'rtta qiymatdan foydalanishga imkon beradi. Bunday holda, ta'sir qiymatlar soniga bog'liq:
Shunday qilib, yuqoridagi CSS qoidasini iloji boricha qisqartirish va quyidagicha yozish mumkin:
p.test (to'ldirish: 5px 35px 10px 20px)
Margin-left, margin-top, margin-o'ng va chekka-pastki uslub atributlari mos ravishda chap, yuqori, o'ng va pastki chegara qiymatlarini o'rnatishga imkon beradi:
margin-top | o'ng chekka | margin-pastki | chap chekka:<значение>|avto|meros
Yuqorida aytib o'tilganidek, marja joriy elementning chegarasidan qo'shni elementning chegarasigacha yoki qo'shni elementlar bo'lmasa, asosiy konteynerning ichki chegarasigacha bo'lgan masofadir.
Chekish miqdori piksel (px), foiz (%) yoki CSS uchun ruxsat etilgan boshqa birliklarda ko'rsatilishi mumkin:
p(
chap chekka: 20px;
}
h1(
o'ng chekka: 15%;
}
Avtomatik qiymat chekinish hajmi brauzer tomonidan avtomatik ravishda hisoblab chiqilishini anglatadi. Agar siz foiz belgilaridan foydalansangiz, chekinishlar quyidagilarga qarab hisoblanadi asosiy konteynerning kengligi. Bundan tashqari, bu faqat chet-chap va chekka-o'ng uchun emas, balki chet-usti va chet-pastki uchun ham amal qiladi, foiz chegaralari konteyner balandligiga emas, balki kengligiga qarab hisoblanadi.
Tashqi chegara qiymatlari sifatida foydalanishga ruxsat beriladi salbiy qiymatlar:
p(
chap chekka: -20px;
}
Agar chekinishning ijobiy qiymatlari bilan qo'shni elementlar uzoqlashtirilsa, salbiy qiymat bilan qo'shni blok biz bunday salbiy chiziqni o'rnatgan element bilan to'qnashadi.
Shuningdek, biz style atributi yordamida to'ldirishni belgilashimiz mumkin marja. U bir vaqtning o'zida veb-sahifa elementining barcha tomonlarida chekinish qiymatlarini o'rnatadi:
chegara:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]
Bir, ikki, uch yoki to'rtta to'ldirish qiymatlarini belgilashda bu xususiyat to'ldirish qoidasi bilan bir xil qonunlarga bo'ysunadi.
Ramkalarni o'rnatishda uchta turdagi parametrlar mavjud:
Ramka qalinligi parametridan boshlaylik:
chegara kengligi: [qiymat | yupqa | o'rtacha | qalin] (1,4) | meros
Ramka qalinligi piksellarda yoki CSS-da mavjud bo'lgan boshqa birliklarda ko'rsatilishi mumkin. Yupqa, o'rta va qalin o'zgaruvchilar chegara qalinligini mos ravishda 2, 4 va 6 pikselga o'rnatadi:
chegara kengligi: o'rta;
To‘ldirish va chekka xossalarida bo‘lgani kabi, chegara kengligi parametri ham bir, ikki, uch yoki to‘rtta qiymatga ruxsat beradi, shuning uchun chegaraning kengligini bir vaqtning o‘zida barcha tomonlar uchun yoki har bir tomon uchun alohida o‘rnatadi:
chegara kengligi: 5px 3px 5px 3px
Joriy paragraf uchun qoidadan foydalanib, yuqori chegara qalinligini 1px, oʻngga 2px, pastki 3px va chapga 4px qilib belgilang (chegara kengligi: 1px 2px 3px 4px;)
Chegara-chap-kenglik, chegara-yuqori-kenglik, chegara-oʻng-kenglik va chegara-pastki-kenglik uslub atributlaridan foydalanib, siz mos ravishda chegaraning chap, yuqori, oʻng va pastki tomonlari qalinligini oʻrnatishingiz mumkin:
border-left-width|border-top-width|border-right-width|border-bottom-width: thin|medium|thick|<толщина>|meros
Keyingi parametr chegara rangi bo'lib, siz uni boshqarishingiz mumkin ramka rangi:
chegara rangi: [rang | shaffof] (1,4) | meros
Xususiyat elementning barcha tomonlari uchun bir vaqtning o'zida yoki faqat ko'rsatilganlar uchun chegara rangini o'rnatishga imkon beradi. Qiymat sifatida siz HTMLda qabul qilingan ranglarni belgilash usullaridan foydalanishingiz mumkin: o'n oltilik kod, kalit so'zlar va boshqalar:
p (chegara kengligi: 2px; chegara rangi: qizil)
transparent shaffof chegara rangini o'rnatadi va ota-ona qiymatini meros qilib oladi. Odatiy bo'lib, agar chegara rangi ko'rsatilmagan bo'lsa, element ichidagi shrift uchun ishlatiladigan rang ishlatiladi.
Chegara-chap-rang, hoshiya-yuqori rang, hoshiya-oʻng-rang va hoshiya-pastki rang uslubi atributlaridan foydalanib, siz hoshiyaning mos ravishda chap, yuqori, oʻng va pastki tomonlari rangini oʻrnatishingiz mumkin:
border-left-color|border-top-color|border-right-color|border-bottom-color: shaffof|<цвет>|meros
Va oxirgi parametr chegara uslubi belgilaydi ramka turi:
chegara uslubi: (1,4) | meros
Ramka turi elementning barcha tomonlari uchun bir vaqtning o'zida yoki faqat ko'rsatilganlar uchun belgilanishi mumkin. Bir nechta qiymatlardan foydalanish mumkin kalit so'zlar. Tashqi ko'rinish ishlatiladigan brauzerga va ramkaning qalinligiga bog'liq bo'ladi. Ma'nosi yo'q sukut bo'yicha ishlatiladi va ramkani ko'rsatmaydi va uning qalinligi nolga o'rnatiladi. Yashirin qiymat bir xil ta'sirga ega. Qalinligiga qarab boshqa qiymatlar uchun olingan ramka quyidagi jadvalda ko'rsatilgan:
Uslub atributlari chegaraning chap, yuqori, o'ng va pastki tomonlariga chizilgan chiziqlar uslubini belgilaydi, mos ravishda:
border-left-style|border-top-style|border-right-style|border-bottom-style: hech biri|yashirin|nuqtali|chiziqli|qattiq|double|groove|tizma|inset|outset|meros
To'ldirish va to'ldirish variantlarida bo'lgani kabi, mavjud umumiy chegara mulki. Bu sizga bir vaqtning o'zida element atrofidagi chegaraning qalinligi, uslubi va rangini o'rnatishga imkon beradi:
chegara: | meros
Qiymatlar bo'sh joy bilan ajratilgan istalgan tartibda bo'lishi mumkin:
td (chegara: 1px qattiq sariq)
Chegarani elementning faqat ma'lum tomonlariga o'rnatish uchun chegara-yuqori, chegara-pastki, chegara-chap, chegara-o'ng xususiyatlari mavjud bo'lib, ular sizga yuqori, pastki, chap va o'ng tomonlari uchun parametrlarni o'rnatish imkonini beradi. mos ravishda ramkalar.
Qolgan narsa - xulosa qilish:
Shuni ta'kidlash kerakki, barcha CSS xususiyatlari veb-sahifa elementining hajmini oshiradi. Shuning uchun, agar biz veb-sahifa dizaynini tashkil etuvchi blokli konteynerlarning hoshiyasining qalinligini yoki to'ldirish hajmini o'zgartirsak, biz ushbu konteynerlarning hajmini mos ravishda o'zgartirishimiz kerak, aks holda ular harakatlanishi mumkin va dizayn buzilgan.
Hammasi shu, keyingi safar ko'rishguncha!
CSS tartibi har doim to'rtburchaklar shaklida bo'lgan. Har qanday silliq chiziqlar ishlab chiquvchining vakolatidir. Uslub qoidalari sahifaga ekran o'lchamlari chegarasida silliq shakl berish uchun etarli imkoniyatlarni taqdim etadi. Ammo har qanday tartib elementi har doim to'rtburchak bo'lib, unda ma'lumotlarning joylashishi CSS qoidalari bilan tartibga solinadi.
Har bir sahifa elementi toʻliq joylashtirilganda har tomonlama toʻldirish muhim ahamiyatga ega va CSS ustki toʻldiruvi alohida belgilanadi, chunki u turli elementlar, ayniqsa inline elementlar uchun muhim.
Blok elementida chekka qoidasi, uning ichidagi elementlar uchun to‘ldirish qoidasi va undan ham foydalanish mumkin bo‘lgan chegara kengligi mavjud.
Yuqoridagi chiziq alohida ahamiyatga ega. Blok ichidagi CSS to'ldirish qoidalarini ushbu blokdagi mutlaqo va nisbatan joylashtirilgan elementlar uchun qoidalar bilan bog'laydi.
CSS qoidalari uchun keng tarqalgan amaliyot: siz har tomondan bir xil to'ldirishni, yuqori/pastki va o'ng/chap juftlikda yoki har bir tomon uchun alohida belgilashingiz mumkin. Masalan,
Birinchi holda, elementning ichki qismi joylashgan tashqi idishning yon tomonlari o'rnatiladi. Ikkinchi holda, yuqori va pastdagi chekkalar 10px, chap va o'ngda - 20px. Uchinchi holatda, chuqurchalarning o'lchami har tomondan ko'rsatilgan: yuqori, o'ng, pastki va chap.
Bu barcha hollarda, chekinish yuqori CSS - 10 piksel.
Agar tartib elementi mutlaqo joylashtirilmagan bo'lsa, u sahifani shakllantirishning umumiy tartibida joylashtiriladi.
Agar aniqlasak scCurrInfo elementidagi yuqori CSS-ni to'ldiring, maqsadga erishiladi, lekin li darajasida bo'lmaydi.
IN bu misolda to'ldirish qoidasidan foydalanish: 40px; kenglik va balandlik qoidalarini 80px ga adekvat qisqartirishni talab qiladi. Aks holda, scCurrInfo blokining o'lchami tashqi blokning chegaralaridan oshib ketadi.
Agar biz to'ldirish qoidasini scCurrInfo tavsifidan olib tashlasak, lekin uni ro'yxat elementi uslubi tavsifiga 20px qiymati bilan qo'shsak, biz faqatgina olamiz. yuqori chiziq. CSS bu qiymatni boshqa tomonlarga qo'llamaydi.
Tabiiyki, chekinish qoidasidan bunday foydalanish har bir li elementiga taalluqlidir.
Ba'zi ishlab chiquvchilar sahifalarni joylashtirish orqali mukammallikka erishadilar blok elementlari. Ko'rinib turibdiki, bu jadvallardan boshlanib, o'zingiz bilan tugatish klassik amaliyotdir ta'lim jarayoni bloklarda.
Blok tartibiga xos bo'lgan erkinlik hayratlanarli va ishlab chiquvchining tasavvurini qat'iy jadval qoidalari bilan cheklab bo'lmaydi: faqat satrlar, faqat katakchalar, faqat gorizontal va vertikal ravishda birlashtiriladi. Aloqaviy g'oyalarga xos narsa yo'q.
Shu bilan birga, jadvallar aniq kamchiliklarga qo'shimcha ravishda ko'plab sifatli afzalliklarga ega. Tepada to'ldirishni yaratishda CSS chap, o'ngdagi to'ldirishni hisobga oladi (pastki - bu alohida moment). Jadval katakchalari qoidalari vertikal va gorizontal tekislashni boshqarishga imkon beradi. Qator uslublaridan foydalanib va ularni hujayra uslublari bilan birlashtirib, tarkibning murakkab ko'rinishlarini yaratishingiz mumkin.
Sahifaning to'rtburchaklar ko'rinishidagi odatiy ko'rinishi uni jadval shaklida taqdim etishga umuman to'sqinlik qilmaydi. Bular ham to'rtburchaklar, lekin ular ham jadval kataklari, ya'ni bloklar qoidalarini to'ldiradigan o'z qoidalariga ega.
POSITION qoidasi bilan bloklash: mutlaq ; joylashgan blokga nisbatan uning koordinatalari bilan belgilangan joyda joylashgan bo'ladi.
CSS qoidalarining o'ziga xos xususiyati bu "amaliyot - eng yaxshi mezon haqiqat" ko'p hollarda, ayniqsa brauzerlararo muvofiqlik talab qilinganda va tartib qo'lda bajarilganda, kaskadli uslublar jadvallarida to'liq huquqli qo'llanmalarni o'rganish afzalroqdir.
Jadvallardan foydalanish ko'pincha hujayra tarkibini o'zgartirish muammolariga olib keladi. Blok ichidagi o'xshash ofset har doim ham barcha elementlarga ta'sir qilmaydi. Tajriba qilish orqali siz kerakli natijaga erishishingiz mumkin. Arzimas vazifa: qanday qilib Yuqori to'ldirishni olib tashlash har doim ham CSS uchun ahamiyatsiz yechim emas.
Ba'zi hollarda, ba'zi mashhur veb-sayt kontentini boshqarish tizimida sahifa elementlarini joylashtirishingiz kerak bo'lganda, siz hali ham nafaqat eksperimental amaliyotga, balki hamkasblaringiz tajribasiga ham e'tibor berishingiz kerak.
Element yoki tartibni yaratishda biz bir-biriga nisbatan gorizontal chiziq yaratishimiz kerak bo'ladi. Bu bloklar yoki turli elementlar sifatida bo'lishi mumkin, aniqrog'i, u gorizontal joylashgan bloklar o'rtasida dastlab ko'rsatilgan masofani qilishdir. Mavjud turli yo'llar bilan dizayn elementlarida chekinishlar yaratish bo'yicha. Biroq, bir nechta bilan muvofiqligi uchun zamonaviy brauzerlar Bu erda biz sahifadagi matn yoki blok sifatida joriy chekinish mavzusiga to'xtalamiz.Xususiyat matn elementining birinchi qatori boshlanishidan oldin qancha gorizontal matn maydonini o'rash kerakligini aniqlaydi. Bo'shliq elementning boshlang'ich chetidan va blok darajasi uchun konteynerdan hisoblanadi.
Veb-sahifa mazmunining ko'p qismi matn shaklida bo'lganligi sababli, ushbu matnni jozibali va samarali tarzda shakllantirish qobiliyati veb-dizayner bo'lish uchun muhim mahoratdir. Tavsif va paragrafga cheklov yaratish uchun eng ko'p qo'llaniladigan va tavsiya etilgan usul CSS-dan foydalanishdir. Bu yerda sizga matn va indent element uchun CSS dan qanday foydalanish mumkinligi haqida turli misollar taqdim etiladi.
CSS yordamida yuqori chegarani o'rnating
Yuqori chegaralarni yaratish uchun biz, albatta, CSS xususiyatlarisiz qila olmaymiz, chunki bizga margin-top kerak, bu qiymat turli yo'llar bilan o'rnatilishi mumkin, masalan, px va standart piksellarda, em, % va hokazo, hamma narsa sodir bo'ladi. o'lchov birliklarida CSS stilistikasida.
Foydalanish misoli:
Chegara bloki(
chet-usti: 50px;
}
Rasmda nimani ko'rishingiz mumkin:
Siz undan bloklarni tashlash uchun ham foydalanishingiz mumkin, bu erda siz nomli xususiyatdan foydalanishingiz mumkin chekka-chap Shuningdek chekka o'ng Va chekka-pastki. Biz oddiygina margin xususiyatini ko'rsatganimizda, dastlab uning uchun 4 ta parametrni o'rnatish mumkin bo'lsa, bu erda biz kontseptsiyani soat yo'nalishi bo'yicha ko'rib chiqamiz, bu erda biz har bir tomonning ostidagi davomi bilan yuqori tomondan boshlaymiz.
chegara: 20px 50px 30px 50px;
CSS-da yuqori to'ldirish ham mavjud
Kontent elementini vertikal ravishda tekislash kerak bo'ladi, bu ota-blokga nisbatan, bu erda boshqa xususiyatlardan foydalanish mumkin, masalan, padding-top, buni amalga oshiradi, aniqrog'i ichki to'ldirishni sukut bo'yicha yuqoriga o'rnatadi. Agar biz shunga o'xshash tarzda yozilishi va o'rnatilishi mumkin bo'lgan o'xshash xususiyatlar haqida gapiradigan bo'lsak, bu erda bizda px, em, % va boshqa birliklarda chegara mavjud.
Misol:
To'ldirish bloki(
to'ldirish ustki qismi: 47px;
}
Endi biz mulkning analogini ko'rib chiqishimiz mumkin marja Va to'ldirish, bu blok elementining boshqa tomonlariga chekinishlarni o'rnatish uchun ishlatiladi, lekin allaqachon alohida ketadi: to'ldirish - chap, to'ldirish - o'ng, to'ldirish - pastki. Qaerda darhol kerakli masofani o'rnatishingiz mumkin, faqat barcha tomonlar uchun va hamma narsa bir vaqtning o'zida bo'ladi.
to'ldirish: 10px 20px 40px 50px;
Bu erda siz dastlab qiymatni o'rnatishingiz mumkin marja yuqoridan tushunganingizdek boshlanadi, lekin keyin hamma narsa soat yo'nalishi bo'yicha ketadi, bu o'ngda, pastda, chapda va hokazo.
Endi, har xil vaziyatlarga qarab, sizda tepadan chekinish imkoniyati mavjud CSS uslublari, bu erda biz xususiyatlardan foydalanamiz marja Va to'ldirish Internet-resursingiz sahifasiga kerakli elementlarni o'zingiz xohlaganingizdek joylashtirishingiz mumkinligi va bajarishingiz kerak.
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore and dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequaute in. "Velit esse cillum doore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 1.10.32-band "de Finibus Bonorum et Malorum", Tsitseron tomonidan milodiy 45 yilda yozilgan. "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore datatis and quasi architecto beatae vitae dicta sunt explicabo quia consequuntur Eng muhimi, nima uchun kerak bo'ladi? ” Ingliz tiliga tarjima 1914, X. Rakxem "Ammo men sizga zavqni qoralash va og'riqni maqtash haqidagi bu noto'g'ri g'oya qanday tug'ilganini tushuntirishim kerak va men sizga tizim haqida to'liq ma'lumot beraman va buyuk tadqiqotchining haqiqiy ta'limotlarini tushuntiraman. Haqiqatdan, inson baxtining ustasi - hech kim zavqni rad etmaydi, yoqtirmaydi yoki undan qochadi, chunki bu zavqdir, lekin zavqlanishni oqilona bilmaydiganlar juda og'riqli oqibatlarga duch kelishadi. Og'riqni sevadigan yoki unga intilayotgan yoki olishni xohlaydigan har bir kishi, chunki bu og'riqdir, lekin vaqti-vaqti bilan yog' va og'riq unga katta zavq bag'ishlashi mumkin. Undan qandaydir foyda olish uchun, lekin hech qanday zerikarli oqibatlarga olib kelmaydigan lazzatlanishni tanlagan yoki hech qanday zavq keltirmaydigan og'riqdan qochadigan odamni ayblashga kimning haqqi bor? 1.10.33-band "de Finibus Bonorum et Malorum", Tsitseron tomonidan milodiy 45 yilda yozilgan. "Vero EOS et Accusamus et Iusto dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atti quos Dolores molestias experim Ecati Cupiditate Non Provider, Similique Sunt in Culpa Qui Officia, Deserunt Mollitia Animilor and Distributin Discussions ero tempore , cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis dolor repellendus and aut officiis debitis or rerum nosepeediates aque earum rerum Hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores taxallus consequatur yoki aut perferendis doloribus asperiores repellat." Ingliz tiliga tarjimasi 1914, X. Rakxem “Boshqa tomondan, biz lahzalik zavq-shavq jozibalariga shunchalik aldanib, ruhiy tushkunlikka tushib qolgan, orzu-havaslar bilan koʻr boʻlib qolgan, ular ogʻriq va qaygʻuni oldindan koʻra olmaydigan odamlarni adolatli gʻazab va nafrat bilan qoralaymiz. iroda zaifligi tufayli o'z burchini bajara olmaganlar ham aybdor bo'ladilar Agar biz eng yaxshi ko'rgan narsani qilishimizga hech narsa to'sqinlik qilmasa, har qanday zavqni qabul qilish kerak va har qanday og'riqdan qochish kerak, ammo ba'zi sharoitlarda va burch yoki biznes majburiyatlari tufayli zavqlanishlar tez-tez sodir bo'ladi. Shuning uchun donishmand bu masalalarda har doim tanlab olish tamoyiliga amal qiladi: u boshqa katta zavqlarni ta'minlash uchun zavqlanishni rad etadi yoki undan ham yomonroq azoblardan qochish uchun azoblarga chidaydi.
CSS xususiyati margin-top elementning yuqori qismidagi chegarani o'rnatadi. To'ldirish - joriy elementning yuqori chegarasining tashqi chetidan uning asosiy elementining ichki chegarasigacha yoki uning ustidagi elementning chegarasigacha bo'lgan masofa. E'tibor bering, inline elementlar (displey: inline;) faqat chap va o'ng chekkalarga ega bo'lishi mumkin.
Tashqi to'ldiruvchining o'lchami piksel (px), foiz (%) yoki boshqa CSS birliklarida ko'rsatilishi mumkin. Qiymat ijobiy yoki salbiy bo'lishi mumkin.
Eslatma: To'liq elementning pastki yoki yuqori to'ldiruvchisi, agar u belgilangan balandlik o'lchamiga ega bo'lmasa, asosiy elementning umumiy balandligiga ta'sir qilishi mumkin.
