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