Създаването на пространства и физическото разделяне на елементи в HTML може да бъде трудно за разбиране за начинаещия уеб дизайнер. Това е така, защото HTML има свойство, известно като „пробел в колапс“. независимо дали въвеждате 1 интервал или 100 в своя HTML код, уеб браузърът автоматично ги свива до само едно пространство. Това е различно от програма като Майкрософт Уърд, което позволява на създателите на документи да добавят множество интервали за отделяне на думи и други елементи от този документ. Това не е начинът, по който работи интервалът при дизайна на уебсайта.
И така, как да добавите бели пространства в HTML, които се показват в уеб страница, която сте изградили? Тази статия разглежда някои от различните начини.
Пространства в HTML с CSS
Предпочитаният начин за добавяне на интервали във вашия HTML е с Каскадни таблици със стилове (CSS). CSS трябва да се използва за добавяне на всякакви визуални аспекти на уеб страница и тъй като разстоянието е част от характеристиките на визуалния дизайн на дадена страница, CSS е мястото, където искате да се направи това.
В CSS можете да използвате свойствата на поле или подложка, за да добавите пространство около елементи. Освен това свойството text-indent добавя място в предната част на текста, например за отстъпи на абзаци.
Ето пример за това как да използвате CSS, за да добавите място пред всички ваши абзаци. Добавете следния CSS към вашия външен или вътрешен таблица със стилове:
п {
отстъп на текст: 3em;
}
Пространства в HTML във вашия текст
Ако просто искате да добавите допълнително пространство или две към текста си, можете да използвате неразбиващото се пространство. Този знак действа точно като стандартен интервал, само че не се свива в браузъра.
Ето пример за това как да добавите пет интервала в ред от текст:
Този текст има пет допълнителни интервала вътре в него
Използва HTML:
Този текст има пет допълнителни интервала вътре в него
Можете също да използвате
етикет, за да добавите допълнителни прекъсвания на редове.
В края на това изречение има пет прекъсвания на редове
Защо разстоянието в HTML е лоша идея
Въпреки че и двете опции работят - елементът без неразбиващи се интервали наистина ще добави интервал към текста и реда почивките ще добавят интервали под параграфа, показан по-горе - това не е най-добрият начин за създаване на интервали във вашия уеб страница. Добавянето на тези елементи към вашия HTML добавя визуална информация към кода, вместо да отделя структурата на страница (HTML) от визуалните стилове (CSS). Най-добрите практики диктуват, че те трябва да бъдат отделни поради редица причини, включително лекота на актуализиране в бъдеще и общ размер на файла и производителност на страницата.
Ако използвате външна таблица със стилове, за да диктувате всичките си стилове и интервали, тогава промяната на тези стилове за целия сайт е лесна за изпълнение, тъй като просто трябва да актуализирате тази една таблица със стилове.
Помислете за горния пример на изречението с пет
етикети в края му. Ако искате това количество интервали в долната част на всеки абзац, ще трябва да добавите този HTML код към всеки абзац в целия си сайт. Това е справедлива сума на допълнителна надценка, която ще раздуе страниците ви. Освен това, ако решите по пътя, че това разстояние е твърде много или твърде малко и искате да го промените малко, ще трябва да редактирате всеки отделен параграф в целия си уебсайт. Не благодаря!
Вместо да добавяте тези разстояния към вашия код, използвайте CSS.
п {
подложка отдолу: 20px;
}
Този един ред на CSS ще добави интервали под параграфите на вашата страница. Ако искате да промените това разстояние в бъдеще, редактирайте този ред (вместо кода на целия сайт) и сте готови!
Сега, ако трябва да добавите единично пространство в една част от уебсайта си, като използвате
тагове или едно неразбиващо се пространство не е краят на света, но трябва да внимавате. Използването на тези опции за вграден HTML интервал може да бъде хлъзгав наклон. Въпреки че един или два може да не навредят на вашия сайт, ако продължите по този път, ще въведете проблеми в страниците си. В крайна сметка е по-добре да се обърнете към CSS за HTML интервал и всички други визуални нужди на уеб страницата.