„ маргин-топ ” својство помаже многим програмерима у креирању прилагодљивих изгледа и позиционирању ХТМЛ елемената. Коришћење својства „маргин-топ“ пружа већу контролу над ХТМЛ елементима, додаје визуелно раздвајање и помаже у креирању бољег респонзивног дизајна. Овај водич демонстрира својство маргин-топ са практичном имплементацијом у ЦСС.
- Шта је „маргин-топ“ својство?
- Користите својство „маргин-топ“ са позитивном вредношћу
- Користите својство „маргин-топ“ са негативном вредношћу
Шта је „маргин-топ“ својство?
„ маргин-топ ” својство се користи за стварање додатног простора између ХТМЛ елемената. Може се подесити са позитивним и негативним вредностима. Ове вредности су постављене у складу са потребама дизајна и помажу у спречавању преклапања и прилагођавању размака између ХТМЛ елемената.
Како користити својство „маргин-топ“ са позитивном вредношћу?
Својство „маргин-топ“ са позитивном вредношћу додаје додатни размак од горње позиције према центру изабраног ХТМЛ елемента. Наведена вредност може бити у пикселима, процентима, рем или у глобалним вредностима као што су ауто, инхерит, унсет, итд. Хајде да прођемо кроз пример ради бољег разумевања:
Пример: Коришћење позитивне вредности
Претпоставимо да је ХТМЛ датотека која креира „ <див> ” и пружа лажне податке. Затим доделите „ позитивним ” вредност у класу елемента „див”:
< тело >
< див класа = 'позитивно' >
< стр > Додељује се врх маргине са позитивном вредношћу стр >
див >
тело >
Након креирања ХТМЛ структуре, примените ЦСС својства на „ позитивним ' класа:
< стил >
.позитиван {
ширина: 300пк;
висина: 200пк;
боја позадине: шумскозелена;
фонт-сизе: 20пк;
боја: #ффф;
маргин-топ: 50пк;
}
стил >
У горњем исечку кода:
- Прво, подесите вредности „ 300пк ' и ' 200пк ” у ЦСС “ ширина ' и ' висина ” својства, респективно.
- Затим, „ боја позадине ”, “ фонт-сизе ', и ' боја ” ЦСС својства се користе у сврху боље визуелизације.
- На крају, вредност „50пк“ је обезбеђена за „ маргин-топ ” да бисте додали додатни простор.
Након извршења горњег исечка кода, веб страница изгледа овако:
Горњи гиф илуструје ефекат подешавања вредности својства маргин-топ на веб страници.
Како користити својство „маргин-топ“ са негативном вредношћу?
„ маргин-топ ” својство са негативном вредношћу поставља додатни размак од горње позиције супротно од центра или према спољашњој страни странице у односу на изабрани ХТМЛ елемент. Углавном се користи за креирање ефеката преклапања или за позиционирање ХТМЛ елемента.
Хајде да прођемо кроз пример за боље разумевање.
Пример: Коришћење негативне вредности
Претпоставимо да је ХТМЛ датотека која креира „ <див> ” и пружа лажне податке. Затим доделите „ негативан ” вредност у класу елемента „див”:
< стил >.негативан {
бела боја;
тект-алигн: центар;
боја позадине: црвена ;
маргин-топ: -30пк ;
паддинг: 30пк;
висина: 100пк;
}
стил >
< тело >
< див класа = 'негативан' >
Негативна вредност је додељена за Маргин-топ проперти
див >
тело >
Опис горе наведеног исечка кода је описан у наставку:
- Прво, „ негативан ” класа је изабрана унутар „ <стиле> ” за примену ЦСС стила.
- Затим подесите вредности „ 220пк ' и ' црвена ” у ЦСС “ ширина ' и ' боја позадине ” својства за стварање бољих визуелних разлика.
- Затим поставите вредност „ -30пк ” у ЦСС “ маргин-топ ' имовина.
- Након тога, креирајте „ <див> ” означите и доделите му класу “ негативан ”. Такође, обезбедите лажне податке ХТМЛ елементу див.
Након извршења горњег исечка кода, веб страница изгледа овако:
Горњи гиф приказује ефекат који се јавља на дизајн веб странице постављањем негативне вредности за својство маргин-топ.
Закључак
„ маргин-топ ” својство се користи за стварање додатног простора између ХТМЛ елемената. Може се подесити са позитивним и негативним вредностима. Ако је својству „маргин-топ“ додељена позитивна вредност, онда се додатни простор додаје према центру веб странице или изабраном ХТМЛ елементу. У случају „негативне“ вредности, размак се додаје али према спољашњој страни странице. Овај чланак показује шта је својство врха маргине у ЦСС-у.