CSS yordamida CSS-da bo'shliqlar va elementlarni jismoniy ajratish
Bo'shliqlar yaratish va elementlarning jismoniy ajratilishini HTMLda boshlash veb-uslubchisi uchun qiyin bo'lishi mumkin. Buning sababi, HTML "bo'shliqlar qulashi" deb nomlanuvchi xususiyatga ega. HTML-kodingizda 1-bo'sh joy yoki 100-ni yozsangiz, veb-brauzer bu bo'shliqlarni avtomatik ravishda bitta joyga avtomatik ravishda tushiradi. Bu hujjat yaratuvchilarga so'zlarni va ushbu hujjatning boshqa elementlarini ajratish uchun bir nechta bo'shliqlar qo'shish imkonini beruvchi Microsoft Word kabi dasturlardan farq qiladi.
Veb-sayt dizayni intervalgacha ishlamaydi.
Shunday qilib, HTML sahifasida veb-sahifada ko'rsatiladigan oq bo'shliqlarni qanday qo'shasiz? Ushbu maqola turli xil usullarni o'rganib chiqadi.
CSS bilan HTMLda bo'shliqlar
HTML-da bo'sh joylarni kiritishning afzal yo'li Cascading Style Sheets (CSS) bilan ishlaydi . CSS veb-sahifaning har qanday ingl. Tomonlarini qo'shish uchun ishlatilishi kerak, chunki intervalda sahifadagi ingl. Dizayn xususiyatlarining bir qismi bo'lganligi sababli, CSS bu bajarilishini xohlagan joy.
CSS-da, elementlar atrofida bo'shliq qo'shish uchun chekka yoki padding xususiyatlaridan foydalanishingiz mumkin. Bundan tashqari, matnni indent xususiyati paragraflarni kiritish uchun matnning old qismiga joy qo'shadi.
Bu erda paragraflaringiz oldida bo'sh joy qo'shish uchun CSS-dan qanday foydalanish kerakligi haqida ma'lumot berilgan. Tashqi yoki ichki uslublar jadvaliga quyidagi CSS-ni qo'shing:
p {
Matn-yo'riq: 3em;
}
HTMLda bo'shliqlar: matn ichida
Agar siz matnga qo'shimcha joy yoki ikkita qo'shimcha qo'shishni xohlasangiz, bo'sh joyni ishlatishingiz mumkin.
Ushbu belgi standart bo'sh joy belgisi kabi ishlaydi, faqat u brauzer ichida yo'qolmaydi.
Matn qatorida beshta bo'sh joyni qanday qo'shish kerakligi haqidagi misol:
Ushbu matn ichida beshta qo'shimcha joy mavjud
HTMLni ishlatadi:
Ushbu matnda & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; uning ichida beshta qo'shimcha joy mavjud
Bundan tashqari, qo'shimcha chiziqli uzgarishlar kiritish uchun tagini ham ishlatishingiz mumkin.
Nima uchun HTMLda bo'sh joy yomon tushunchadir
Ushbu variantlar ikkalasi ham ishlayotgan bo'lsa - buzilmaydigan bo'shliqlar elementi sizning matningizga intervalni qo'shadi va chiziqli uzilishlar yuqorida ko'rsatilgan xatboshning ostiga bo'shliq qo'shishadi - bu sizning veb-sahifangizda intervalli yaratishning eng yaxshi usuli emas. Ushbu elementlarni HTML-ga qo'shish ingl. Uslublardan (CSS) sahifa (HTML) tuzilishini ajratish o'rniga kodga ingl. Ma'lumot beradi. Eng yaxshi amaliyotlar ularni bir nechta sabablarga ko'ra, jumladan kelajakda yangilanish qulayligi va umumiy fayl hajmi va sahifa ishlashi kabi alohida bo'lishi kerakligini belgilaydi.
Agar siz barcha uslublar va intervallarni belgilash uchun tashqi uslublar jadvalidan foydalansangiz, bu uslublarni butun sayt uchun o'zgartirish oson, chunki siz bunday uslublar jadvalini yangilashingiz kerak.
So'zning yuqorisidagi misolni oxirida beshta teg bilan ko'rib chiqing. Har bir xatboshining pastki qismida bu bo'shliqning miqdorini xohlagan bo'lsangiz, ushbu HTML kodni butun saytingizdagi har bir xatboshiga qo'shishingiz kerak bo'ladi. Bu sizning sahifalaringizni shishiradigan qo'shimcha belgilarning adolatli miqdori.
Bundan tashqari, agar siz bu masofani juda ko'p yoki juda kam deb qaror qilsangiz va uni biroz o'zgartirmoqchi bo'lsangiz, har bir xatni butun veb-saytingizda tahrirlashingiz kerak bo'ladi. Rahmat kerak emas!
Ushbu intervalli elementlarni kodingizga qo'shish o'rniga, CSS-dan foydalaning.
p {
padding-bottom: 20px;
}
CSS-ning bir satri sizning sahifangiz paragraflari ostiga bo'sh joy qo'shadi. Agar siz kelajakda bu intervalni o'zgartirishni xohlasangiz, bu qatorni tahrir qiling (butun sayt kodi o'rniga) va siz borishingiz yaxshi!
Agar veb-saytingizning bir qismida bitta joyni kiritish kerak bo'lsa,
Eslatib o'tamiz,
Ushbu satr ichidagi HTML oralig'i parametrlarini ishlatish silliq yomg'ir bo'lishi mumkin. Agar bir yoki ikkita saytingizga zarar yetkazmasangiz, agar siz ushbu yo'lni davom ettirsangiz, siz sahifalaringizga muammo tug'dirasiz. Natijada CSS-ga HTML oralig'i va barcha boshqa veb-saytlarning ingl. Ehtiyojlari uchun CSS-ga o'girilasiz.