HTMLda bo'sh joylar va ularning ishlatilishini…

HTML'dagi bo'sh joylar, shuningdek "whitespace" deb ataladi, brauzer tomonidan ko'rsatilmaydigan belgilar (bo'sh joylar, tablar, yangi satr belgilar). Brauzerlar odatda ularni render qilishda bitta bo'sh joyga qisqartiradi, faqat ma'lum elementlar va CSS xususiyatlari bundan mustasno.

Foydalanishi:

Kod o'qilishi yaxshilash: Dasturchilar HTML manba kodida elementlarni vizual tarzda ajratish uchun bo'sh joylardan foydalanadilar, bu uni tushunarli va tuzilgan qiladi. Bu sahifa ko'rsatilishiga ta'sir qilmaydi.
Inline elementlarni ajratish: Brauzerlar HTML kodida yonma-yon joylashgan inline elementlar orasida avtomatik ravishda bo'sh joy qo'shadi. Bu xatti-harakat CSS yordamida o'zgartirilishi mumkin.
Bo'sh joylarni saqlovchi elementlar:
- <pre>: Barcha bo'sh joylar va yangi satrlarni saqlaydi, matnni aniq kodda yozilganidek formatlaydi.
- <code>: Ko'pincha <pre> ichida kod formatini saqlash uchun ishlatiladi.
- <textarea>: Matn kiritish maydonida bo'sh joylar va yangi satrlar saqlanadi.
CSS white-space xususiyati: Element ichidagi bo'sh joylarni qanday ishlashini boshqarish imkonini beradi:
- normal (standart): Bo'sh joylarni birlashtiradi, yangi satrlar e'tiborga olinmaydi ( <br> bundan mustasno ).
- nowrap: Bo'sh joylarni birlashtiradi, lekin yangi satrlarni oldini oladi.
- pre: <pre> tegidan foydalanishga teng.
- pre-wrap: Bo'sh joylar va yangi satrlarni saqlaydi, shuningdek, avtomatik ravishda satrni ajratadi.
- pre-line: Bo'sh joylarni birlashtiradi, lekin yangi satrlarni saqlaydi.

Bo'sh joylarni birlashtirish misoli:

HTML:

<p>
    Ko'p bo'sh joylar

    va
    satr
    uzilishlari
</p>

Brauzerda natija:

Ko'p bo'sh joylar va satr uzilishlari

<pre> bilan misol:

HTML:

<pre>
    Bo'sh joylar
        saqlanadi
            to'liq
    va
    satr uzilishlari
</pre>

Brauzerda natija:

    Bo'sh joylar
        saqlanadi
            to'liq
    va
    satr uzilishlari

CSS white-space bilan misol:

HTML:

<div class="pre-wrap">
    Bu matn bo'sh joylarini
        saqlaydi
            va satr uzilishlarini

    hamda avtomatik ravishda ajraladi.
</div>

CSS:

.pre-wrap {
    white-space: pre-wrap;
    border: 1px solid black;
    width: 150px;
}

HTMLda bo'sh joylar va ularning ishlatilishini tavsiflang.