Овај чланак показује:
- Како функционишу негативне марже у ЦСС-у?
- Коришћење својства горње негативне маргине
- Коришћење својства дна негативне маргине
- Коришћење својства Негативе Маргин Ригхт
- Коришћење својства Негативе Маргин Лефт
- Зашто је маргин-топ: -5 != маргин-боттом: 5?
Како функционишу негативне марже у ЦСС-у?
Негативна маргина помера садржај ван странице. Метод коришћења негативне маргине је исти као и позитиван, осим што се са вредношћу користи „-“. Пратите доле наведене варијације негативне маргине:
Постојећа ХТМЛ датотека
„ боок.јпг ” је слика ускладиштена у локалном директоријуму, њена путања је дата као „ срц ” вредност. „ ширина ' и ' висина ” слике су подешени на 50%. Сада креирајте „ <див> ” елемент и поставите његову позадину на „ додгерблуе ”. Унутар елемента „<див>“ креирајте „ <х1> “ ознаку и подесите њен “ боја ” до црне:
<центар >
<имг срц = '../боок.јпг' висина = 'педесет%' ; ширина = 'педесет%' >
<див стиле = 'боја позадине: додгерблуе' >
<х1 стил = 'боја Црна;' > Добродошли у Линукхинт >
>
>
Након компајлирања горњег кода, излаз изгледа овако:
„ <х1> ” ознака се налази на дну веб странице пре примене негативне маргине.
Коришћење својства горње негативне маргине
Додати ' маргин-топ “ својство на “ <х1> ” елемент и дајте његову вредност у негативу. На пример, овде је -15% вредност својства маргин-топ:
<центар >
<имг срц = '../боок.јпг' висина = 'педесет%' ; ширина = 'педесет%' >
<див стиле = 'боја позадине: додгерблуе' >
<х1 стил = 'боја: црна; маргина на врху: -15%;' > Добродошли у Линукхинт >
>
>
Након извршавања кода, веб страница изгледа овако:
Излаз показује да негативна маргина-топ чини да се елемент „<х1>” приказује испред надређеног елемента.
Коришћење својства дна негативне маргине
Примените иста својства као горе и само промените „ маргина-дно ' имовина. Након тога, додајте слику на дно елемента „<див>“ да бисте видели визуелне промене:
< див стил = 'боја позадине: додгерблуе' >< х3 стил = 'боја: црна; маргина-дно: -5%;' > Добродошли у Линукхинт х3 >
див >
< имг срц = '../боок.јпг' висина = 'педесет%' ; ширина = 'педесет%' >
Након ажурирања кода наша веб страница изгледа овако:
Горњи излаз показује да текст добија доњу маргину од -5%.
Коришћење својства Негативе Маргин Ригхт
Давањем -55% вредности својства маргин-ригхт елементу <х3>, он се креће у супротном смеру:
< див стил = 'бацкгроунд-цолор:додгерблуе;' >< х3 стил = 'боја: црна; маргина лево: -55%; ' > Добродошли у Линукхинт < / х3 >
< / див >
< имг срц = '../боок.јпг' висина = 'педесет%' ; ширина = 'педесет%' >
Након извршења кода излаз изгледа овако:
Излаз показује да текст добија негативну маргину десно.
Коришћење својства Негативе Маргин Лефт
Својство маргин-лефт које има негативну вредност ради на исти начин. У коду испод, елемент „<х3>” се помера за 50% на леву страну у супротном смеру од својства маргин-лефт:
<див стиле = 'бацкгроунд-цолор:додгерблуе;' ><х3 стил = 'боја: црна; маргина-лева: -50%;' > Добродошли у Линукхинт >
>
<имг срц = '../боок.јпг' висина = 'педесет%' ; ширина = 'педесет%' >
Излаз горњег кода је:
Тако функционише негативна маргина у ЦСС-у.
Зашто је маргин-топ:-5 != маргин-боттом:5?
Када ' маргин-боттом:5% ” се користи додаје маргину од доње стране према центру елемента, али када „ маргин-топ: -5% ” се користи и додаје маргину од 5% од врха, али у супротном смеру (изван странице).
Закључак
У ЦСС-у, негативна маргина ради у супротном смеру додељивањем вредности маргине. Помера садржај елемента ка споља/изван странице. „маргин-топ:-5″ није једнако „маргин-боттом:5” јер обе вредности својства померају садржај у супротним смеровима који одговарају родитељској позицији. Овај чланак је успешно показао како функционише негативна маржа.