HTMLдеги бош орундарын жана алардын колдонулушун…

HTMLдеги бош орундар, аларды "whitespace" деп да аташат, бул браузер көргөзбөйт (бош орундар, табуляциялар, жаңы сап белгилери). Браузерлер аларды рендеринг учурунда бир бош орунга кысуучу, белгилүү элементтер жана CSS касиеттерин эске албаганда.

Колдонуу:

Коддун окумдуулугун жакшыртуу: Дизайнерлер HTML кодуна визуалдык бөлүү үчүн бош орундарды колдонушат, аны түшүнүктүү жана түзүмдүү кылуу үчүн. Бул баракчаны көрсөтүүгө таасир этпейт.
Жол элементтерин бөлүү: Браузерлер автоматтык түрдө жакын жайгашкан жол элементтеринин ортосуна бош орун кошот. Бул жүрүм-турум CSS аркылуу өзгөртүлүшү мүмкүн.
Бош орундарды сактаган элементтер:
- <pre>: Бардык бош орундар жана жаңы саптар сакталат, текст так ошол бойдон форматталат.
- <code>: Адатта <pre> ичинде колдонулат, коддун форматталуусун сактоо үчүн.
- <textarea>: Тексттик талаада бош орундар жана жаңы саптар сакталат.
CSS касиети white-space: Браузердин бош орундарды иштетүүнү башкарууга мүмкүндүк берет:
- normal (өзүнчө): Бош орундар бириктирилет, жаңы саптар эске алынбайт (эгер <br> болбосо).
- nowrap: Бош орундар бириктирилет, бирок жаңы саптарга өтүүнү алдын алат.
- pre: <pre> тегинин маанисине барабар.
- pre-wrap: Бош орундар жана жаңы саптар сакталат, ошондой эле автоматтык түрдө контейнердин кеңейишине ылайык саптар бөлүнөт.
- pre-line: Бош орундар бириктирилет, бирок жаңы саптар сакталат.

Бош орундарды бириктирүүнүн мисалы:

HTML:

<p>
    Көп        бош орундар

    жана
    саптык
    бөлүүлөр
</p>

Браузердеги натыйжа:

Көп бош орундар жана саптык бөлүүлөр

<pre> колдонуу менен мисал:

HTML:

<pre>
    Сакталат
        бардык
            бош орундар
    жана
    саптык бөлүүлөр
</pre>

Браузердеги натыйжа:

    Сакталат
        бардык
            бош орундар
    жана
    саптык бөлүүлөр

CSS white-space касиетинин мисалы:

HTML:

<div class="pre-wrap">
    Бул текст сактайт
        өзүнүн бош орундарын
            жана саптык бөлүүлөрүн

    саптарды,
    ошондой эле кеңейтүү боюнча бөлүнөт.
</div>

CSS:

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

HTMLдеги бош орундарын жана алардын колдонулушун сүрөттөп бериңиз.