HTML-də boşluqları və onların istifadəsini təsvir…

HTML-də boşluqlar, həmçinin "whitespace" adlanır, brauzer tərəfindən göstərilməyən simvollardır (boşluqlar, tablar, yeni sətir simvollari). Brauzərlər onları adətən tək bir boşluğa çevrir, bəzi elementlər və CSS xüsusiyyətləri istisna olmaqla.

İstifadə:

Kodun oxunaqlığını yaxşılaşdırmaq: İnkişaf etdiricilər HTML mənbə kodunda elementləri vizual olaraq ayırmaq üçün boşluqlardan istifadə edir, bu da onu daha anlaşılan və strukturlaşdırılmış edir. Bu, səhifənin brauzerdə göstərilməsinə təsir etmir.
Satır içi elementlərin ayrılması: Brauzərlər HTML kodunda yan-yana yerləşdirilmiş satır içi elementlər arasında avtomatik olaraq boşluq əlavə edir. Bu davranış CSS ilə dəyişdirilə bilər.
Boşluqları saxlayan elementlər:
- <pre>: Bütün boşluqları və sətir sonlarını saxlayır, mətni tam olaraq kodda yazıldığı kimi formatlayır.
- <code>: Adətən <pre> daxilində istifadə olunur, kod formatını qorumaq üçün.
- <textarea>: Mətn daxil etmə sahəsində boşluqlar və sətir sonları saxlanılır.
CSS white-space xüsusiyyəti: Element daxilində boşluqların necə işlənəcəyini idarə etməyə imkan verir:
- normal (standart): Boşluqları birləşdirir, sətir sonları nəzərə alınmır ( <br> istisna olmaqla ).
- nowrap: Boşluqları birləşdirir, amma sətir sonlarını qarşısını alır.
- pre: <pre> etiketi ilə eynidir.
- pre-wrap: Boşluqları və sətir sonlarını saxlayır, həmçinin avtomatik sətir qırmağı imkan verir.
- pre-line: Boşluqları birləşdirir, amma sətir sonlarını saxlayır.

Boşluqların birləşdirilməsinə nümunə:

HTML:

<p>
    Çoxlu boşluqlar

    və
    sətir
    qırılmaları
</p>

Nəticə brauzerdə:

Çoxlu boşluqlar və sətir qırılmaları

<pre> istifadə nümunəsi:

HTML:

<pre>
    Boşluqlar
        saxlanılır
            tam
    və
    sətir qırılmaları
</pre>

Nəticə brauzerdə:

    Boşluqlar
        saxlanılır
            tam
    və
    sətir qırılmaları

CSS white-space istifadə nümunəsi:

HTML:

<div class="pre-wrap">
    Bu mətn boşluqlarını saxlayacaq
        və sətir qırılmalarını

    və avtomatik uyğunlaşacaq.
</div>

CSS:

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

HTML-də boşluqları və onların istifadəsini təsvir edin.