Како направити ХТМЛ размак

Стварање простора и физичко одвајање елемената у ХТМЛ-у може бити тешко разумети за почетног веб дизајнера. То је зато ХТМЛ има својство познато као „размак белог простора“. без обзира на то да ли у ХТМЛ код упишете размак 1 или 100, веб прегледач те просторе аутоматски сужава на само један размак. Ово се разликује од програма попут Мицрософт Ворд, који омогућава творцима докумената да додају више размака за одвајање речи и других елемената тог документа. На овај начин не функционише размак у дизајну веб страница.

Па, како додати размаке у ХТМЛ који се приказују на веб страницу коју сте изградили? Овај чланак испитује неке од различитих начина.

ХТМЛ код на белој позадини
РапидЕие / Гетти Имагес

Размаци у ХТМЛ-у са ЦСС-ом

Пожељни начин за додавање размака у ХТМЛ је помоћу Каскадни табели стилова (ЦСС). ЦСС треба користити за додавање било каквих визуелних аспеката веб странице, а пошто је размак део карактеристика визуелног дизајна странице, ЦСС је место где то желите да урадите.

У ЦСС-у можете користити својства маргине или додавања да бисте додали простор око елемената. Поред тога, својство увлачења текста додаје простор на предњој страни текста, на пример за увлачење пасуса.

instagram viewer

Ево примера како се користи ЦСС за додавање простора испред свих пасуса. Додајте следећи ЦСС у свој спољни или унутрашње табела:

п {
увлачење текста: 3ем;
}

Размаци у ХТМЛ-у унутар вашег текста

Ако тексту желите да додате додатни размак или два, можете да користите размак који се не прекида. Овај знак делује као стандардни размак, само што се не урушава у прегледачу.

Ево примера како додати пет размака унутар реда текста:

Овај текст садржи пет додатних простора

Користи ХТМЛ:

Овај текст садржи пет додатних простора

Такође можете да користите
 ознака за додавање додатних прелома линија.

На крају ове реченице налази се пет прелома реда 





Зашто је размак у ХТМЛ-у лоша идеја

Иако ове две опције функционишу - елемент који не разбија размаке заиста ће додати размак вашем тексту и линији паузе ће додати размак испод горе приказаног пасуса - ово није најбољи начин за стварање размака у вашем веб страна. Додавањем ових елемената у ХТМЛ додајете визуелне информације коду, уместо да раздвајате структуру странице (ХТМЛ) од визуелних стилова (ЦСС). Најбоље праксе налажу да их треба одвојити из више разлога, укључујући лакоћу ажурирања у будућности и укупну величину датотеке и перформансе странице.

Ако користите спољну табелу стилова да бисте диктирали све своје стилове и размаке, тада је лако променити те стилове за целу веб локацију, јер једноставно морате да ажурирате ту листу стилова.

Размотрите горњи пример реченице са пет
ознаке на његовом крају. Ако желите ту количину размака на дну сваког пасуса, мораћете да додате тај ХТМЛ код сваком пасусу на целој веб локацији. То је прилична количина додатних ознака које ће надувати ваше странице. Поред тога, ако на путу одлучите да је овај размак превише или премало и желите да га мало промените, мораћете да уредите сваки пасус на целој веб локацији. Не хвала!

Уместо да додате ове елементе размака у свој код, користите ЦСС.

п {
доњи део: 20пк;
}

Тај један ред ЦСС-а би додао размак испод пасуса ваше странице. Ако сте у будућности желели да промените тај размак, уредите овај ред (уместо кода целокупне веб локације) и спремни сте!

Сада, ако је потребно да додате један простор у један део веб локације, користећи
ознака или један неразбијајући размак није крај света, али морате бити опрезни. Коришћење ових опција интерног ХТМЛ размака може бити клизав терен. Иако један или два можда неће наштетити вашој веб локацији, ако наставите тим путем, унећете проблеме на своје странице. На крају, боље је да се окренете ЦСС-у за ХТМЛ размаке и све остале визуелне потребе веб страница.

instagram story viewer