Да бисте се позабавили овим проблемима, постоји неколико других начина да се у ХТМЛ документ укључи више размака без прекида, као што је „ <пре> ”, “ <спан> ” елементи, ЦСС “ маргин-лево ”, “ паддинг-лево ” својства и још много тога.
Ова студија ће вас научити:
- Како додати просторе помоћу „&нбсп;“ шифра ентитета?
- Како додати простор на картици користећи ХТМЛ елемент „<спан>”?
- Како додати простор на картици користећи ХТМЛ елемент „<пре>”?
- Како додати простор на картици користећи ЦСС својство „маргин-лефт“?
Прво ћемо проћи кроз пример који имплементира „ &нбсп; ” да бисте додали размаке у ХТМЛ документ. Затим постепено прођите кроз илустрације да бисте демонстрирали различите методе за додавање простора на картици.
Како додати просторе помоћу „&нбсп;“ код ентитета у ХТМЛ-у?
Да бисте додали размаке помоћу „ &нбсп; ” на ХТМЛ страници, пратите наведене кораке:
- Додајте див елемент и доделите му класу “ чланак ”.
- Након тога, поставите „ <х2> ” елемент за наслов.
- Затим додајте „ <п> ” елемент за додавање пасуса. На почетку пасуса размаци се додају означавањем шифре ентитета „ &нбсп; ”:
< х2 > Знање је моћ < / х2 >
< стр > &нбсп;&нбсп;&нбсп; Знање је моћ означава да образован човек има потпуну контролу над својим животом кроз снагу знања. < / стр >
< / див >
Може се видети да су размаци успешно додати на почетку пасуса:
Како додати простор на картици користећи ХТМЛ елемент „<спан>”?
ХТМЛ “ <спан> ” је инлине елемент који се користи за означавање дела документа. У текућем примеру, додали смо елемент <спан> са „ таб ” ид. Овај елемент је стилизован у ЦСС-у да производи простор:
< див класа = 'чланак' >
< х2 >Знање је моћ< / х2 >
< стр > < спан ид = 'таб' >< / спан > Знање је моћ означава да образован човек има потпуну контролу над својим животом кроз знање снага.
Стил „чланак“ див
.чланак {маргина: ауто;
ширина : 400пк;
паддинг: 10пк;
}
„ .чланак ” се користи за приступ „ <див> ” ознаке, које се затим примењују са следећим својствима:
- “ ширина ” својство одређује ширину елемента.
- “ маргина ” својство одређује висину елемента.
- “ паддинг ” генерише простор око садржаја елемента.
ИД „картице“ стила
#таб {паддинг-лефт: 8пк;
}
„ #таб “ приступите “ таб ” ид елемента <спан> и примените „ паддинг-лево ” имовине на њему.
Излаз
Како додати простор на картици користећи ХТМЛ елемент „<пре>”?
„ <пре> ” елемент дефинише унапред форматирани текст. Текст унутар <пре> елемента се приказује на веб страници онакав какав јесте.
Прегледајте пример тако што ћете прво направити ХТМЛ страницу:
- Додајте ' <х2> ” елемент за постављање наслова другог нивоа у документ.
- Затим додајте „ <пре> ” и наведите садржај са жељеним форматирањем:
< пре >
функција производФункција ( п1, п2 ) {
ретурн п1 * п2;
}
< / пре >
Излаз
Како додати простор на картици користећи ЦСС својство „маргин-лефт“?
Да бисте додали простор на картици користећи ЦСС “ маргин-лево ” својство, пратите предвиђену процедуру:
- Прво укључите див елемент у документ и доделите му класу „ слике ”.
- Унутар овог елемента див додајте још два елемента див заједно са класом „ имг-1 ' и ' имг-2 ' редом.
- Сваки од ова два елемента див садржи слике које су наведене помоћу „ <имг> ” ознака.
- Ове ' <имг> ” ознаке су повезане са „ срц ' и ' ширина ” атрибути. Атрибут 'срц' наводи УРЛ слике, а атрибут 'видтх' прилагођава ширину слике.
Ево ХТМЛ кода горе поменутог сценарија:
< див класа = 'слике' >< див класа = 'имг-1' >
< имг срц = '/спринг-имагес/маргуерите-фловер.јпг' ширина = '250' >
< / див >
< див класа = 'имг-2' >
< имг срц = '/спринг-имагес/фловер-га8ф105ф1д_1920.јпг' ширина = '250' >
< / див >
< / див >
ХТМЛ страница ће изгледати овако:
Идемо према одељку ЦСС да бисмо додали више размака у „ имг-2 ” класа без коришћења више непрекидних размака.
Стил „слике“ див
.имагес {ширина : 500пк;
маргина: ауто;
}
„ .имагес ” се користи за приступ ХТМЛ див који садржи „ слике ' класа. Објашњење горе наведених својстава је следеће:
- “ ширина ” својство одређује ширину елемента.
- “ маргина ” својство одређује простор око страница елемента.
Стил “имг-2” див
Приступите елементу див помоћу „ .имг-2 ”:
маргин-лефт: 30пк;
}
„ маргин-лево “ имовина са “ 30пк ” вредност се примењује на ХТМЛ див елемент који има класу “ имг-2 ”. Ово својство ће додати размак од 30 пиксела лево од елемента.
Овде резултат показује да је друга слика примењена са мало простора на почетку:
Разрадили смо додавање размака табулатора уместо да користимо више размака који се не прекидају “ &нбсп; ”.
Закључак
У ХТМЛ-у, „ &нбсп; ” код ентитета се обично користи за додавање размака без прекида у документу. Да бисте избегли вишеструку употребу овог кода ентитета, постоје други начини за додавање простора на картици у документ. Ове методе укључују употребу ХТМЛ-а “ <пре> ”, “ <спан> ” елементи, “ маргин-лево ” имовине и још много тога. Овај блог је поменуо неколико начина који помажу да се у ХТМЛ документ додају размаци картица уместо додавања више „&нбсп;“ кодови ентитета.