Начинът, по който браузърите се справят с празното пространство, в началото не е много интуитивен, особено ако сравните как Hypertext Markup Language обработва бялото пространство спрямо програмите за обработка на текст. В софтуера за текстообработка можете да добавите много разстояния или раздели в документа и това разстояние ще бъде отразено в показването на съдържанието на документа. Този дизайн на WYSIWYG не е случаят с HTML или с уеб страници.
Разстояние в печат
В софтуера за текстообработка трите основни бели знака са пространство, раздел, и връщане на каретата. Всеки от тези символи действа по различен начин, но в HTML браузърите ги правят по същество еднакви. Независимо дали поставяте едно пространство или 100 интервала във вашия HTML маркиране или смесете разстоянието си с раздели и връщане на каретката, всички те ще бъдат кондензирани до едно пространство, когато страницата се изобрази от браузър. В терминологията на уеб дизайна това е известно като колапс на бялото пространство
. Не можете да използвате тези типични клавиши за интервали, за да добавите празно пространство в уеб страница, защото браузърът свива повтарящи се пространства само в едно пространство, когато се изобразява в браузъра,Използване на CSS за създаване на HTML раздели и интервали
Днес уебсайтовете са изградени с разделяне на структурата и стила. Структурата на страницата се обработва от HTML, докато стилът се диктува от каскадни таблици със стилове. За да създадете интервал или да постигнете определено оформление, обърнете се към CSS, вместо да добавяте интервали в HTML кода.
Ако се опитвате да използвате раздели за да създадете колони с текст, вместо това използвайте
Ако данните, които излагате, са таблични данни, използвайте таблици, за да ги подравните, както искате. Таблиците често получават лош резултат в уеб дизайна, тъй като са били злоупотребявани като чисти инструменти за оформление в продължение на толкова много години, но таблиците все още са напълно валидни, ако съдържанието ви съдържа истински таблични данни.
Маржове, подплънки и отстъп на текст
Най-често срещаните начини за създаване на интервали с CSS е използването на един от следните CSS стилове:
- марж
- подплата
- текст-отстъп
Например отстъпете първия ред на абзац като раздел със следния CSS (имайте предвид, че това предполага, че вашият абзац има прикачен атрибут на клас „first“):
p.first {
отстъп на текст: 5em;
}
Този параграф отстъпва около пет знака.
Използвайте свойствата на поле или подложка в CSS за да добавите интервал в горната, долната, лявата или дясната част (или комбинации от тези страни) на елемент. Постигнете всякакъв интервал, необходим, като се обърнете към CSS.
Преместване на текст повече от едно пространство без CSS
Ако всичко, което искате, е текстът ви да бъде преместен на повече от едно разстояние от предишния елемент, използвайте неразбиващото се пространство.
За да използвате неразбиващото се пространство, добавяте толкова пъти, колкото са ви необходими във вашата HTML маркировка.
HTML зачита тези неразбиващи се пространства и няма да ги свие до едно пространство. Този подход обаче се счита за лоша практика, тъй като добавя допълнителна HTML маркировка към документ само за постигане на нуждите от оформление. Когато е възможно, избягвайте да добавяте неразбиващи се интервали, само за да постигнете желания ефект на оформление и употреба CSS полета и подплънки вместо.