Маргина вредност и могућности у ЦСС-у

Магрин ЦСС контролише увлачење елемената. Елементи у ХТМЛ-у су правоугаоници. Имају границе, маргине и паддинг.

Подручје маргине је простор изван граница елемента. Својство се користи за постављање удаљености између елемената и њихово позиционирање на страници.

Увлачење

Својство маргине у ЦСС-у може бити постављено на%, пк, вх / вв, ем, и рем. Вредност маргина се може наследити од родитељског елемента (наслеђивати) или аутоматски израчунати од стране претраживача (ауто). Вредности за маргину у ЦСС-у могу бити исписане на много начина (примери су дати у ем-скалабилним јединицама, у зависности од величине фонта елемента).

Начини за подешавање вредности за увлаке:

• за сваку страну (горе, десно, дно, лево) елемента (на пример, одређена је вредност горњег спољашњег удубљења од ивице централног елемента);

 .center {margin-top: 1em;} 

• за супротне стране (прво вредности за врх и дно, затим за лево и десно);

 .center {margin: 1em, 0.5em;} 

• за три стране (вриједност за маргину-врх је означена прва, друга за лијеву и десну, трећа за дно);

 .center {margin: 0em 1.1em 2em;} 

• за сваку страну можете наизменично одредити вредности (маргин-топ, маргин-ригхт, итд.) или у једној линији од врха до леве у смеру казаљке на сату;

 .center {margin: 0.5em 1em 1.5em 2em;} 

• вредност маргиналног елемента може бити иста за сваку страну;

 .center {margin: 1em;} 

• вредност маргине можда неће бити подешена;

• вредност маргине може бити негативна, на пример, у ЦСС-у, маргина-врх са негативном вредношћу помера елемент горе;

 .center {margin-top: -1em;} 

• све стране елемента могу имати негативну маргину, а онда „ослобађа“ простор за околне елементе са дна и са десне стране и „удара“ леви и горњи елемент;

 .center {margin: -1em;} 

Негативна алинеја

Негативне увлаке се често користе за репозиционирање елемента. Када користите негативну маргину, елемент ослобађа простор за друге када се креће. Елементи који имају примењену својину могу да секу друге елементе или да дозволе другим елементима да се "преврну".

 .first {background-color: white;border: 0.06vw solid gold;box-shadow: 0 0 0.09vw gold;width: 50vw;padding: 2vw;margin-bottom: -1vw;margin-left: -9vw;}.second {background-color: black;color: white;font-size: 0.7rem;width: 10vw;padding: 0.5vw;margin-left: 27vw;} 

Помоћу негативне маргине-лијеве и маргине-топ можете помакнути елемент улијево или горе. Ако већ постоје објекти на месту где се елемент помера, онда се они преклапају.

Маргин-боттом и маргин-ригхт не утичу на позицију елемента на који се примењују, али за друге објекте постаје мањи. Захваљујући томе, на слици, блок са именом аутора цитата "се попео" на блок са цитатом.

Ауто и наслеђује

Коришћење ауто у ЦСС-у за маргину и поравнање текста са средњом вредношћу има сличан ефекат. Аутоматски центрира елемент хоризонтално на једнакој удаљености од ивица контејнера.

Пре одређивања аутоматске вредности, елементи су распоређени један за другим без спољашњих отисака (осим ако није другачије назначено) на исти начин као што су распоређени са нултом маргином. Након што одредите средњу вредност, она се пребацује у центар реда.

 .center {margin: auto;} 

Коришћење инхерит вредности подразумева наслеђивање вредности из родитељског елемента. Претпоставимо да основни елемент има вредност у ЦСС маргин-лефт, централни елемент има вредност наведену у претходном примеру.

 body {margin-top: 1em;}.center {margin: auto;} 

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

 body {margin-top: 1em;}.center {margin: inherit;} 

Кориштење ЦСС-а у тијелу Маргине може довести до увлачења. Обично, тело поставља маргину на нулу, а паддинг се користи ако је потребно за алинеје из елемената.

Суседне ставке

С обзиром на чињеницу да спољашње алинеје, заправо, нису део самог елемента, оне често не раде баш онако како би се претпостављало под утицајем других објеката. Један пример овог ефекта је ефекат увлачења.

Претпоставимо да постоје два елемента који се налазе један испод другог, они имају нулу маргине. Ако додате једну од ових маргина, не-нулту маргину, можете видети како се помера у односу на други елемент. Прописујући сличну вредност другом елементу, видимо да се у њему појављују спољашњи алинеји (померају се десно од своје старе позиције), али растојање између њих се не повећава, иако су поравнати дуж хоризонталне линије.

 .first {background-color: black;border: 0.1vw solid gold;margin: 3vw;width: 10vw;}.second {background-color: black;border: 0.1vw solid darkslateblue;margin: 3vw;width: 10vw;} 

Сличан ефекат ће се приметити ако поставите различите марже за два елемента. Побјеђује вриједност веће маргине, та вриједност ће бити једнака удаљености између елемената.

 .first {background-color: black;border: 0.1vw solid gold;margin: 3vw;width: 10vw;}.second {background-color: black;border: 0.1vw solid darkslateblue;margin: 5vw;width: 10vw;} 

Нестед итемс

Маргина не ради исправно са уграђеним увученим елементима. Ако је горња алинеја прописана за родитељске и подређене елементе, тада ће радити само један од њих.

 .parent {width: 40vw;height: 20vh;background-color: rgba(214, 254, 255, 0.82);margin-top: 2vw;}.child {width: 10vw;height: 10vh;background-color: rgba(255, 235, 145, 0.82);margin-top: 2vw;} 

Слика приказује примере понашања елемената и када су маргиналне вредности родитељског и подређеног елемента различите. Као што можете видјети, ако дијете има горњу вриједност маргине већу од вриједности родитеља, родитељ се помјери точно према вриједности специфицираној за дијете.

 .parent {width: 25vw;height: 20vh;background-color: rgba(214, 254, 255, 0.82);margin-top: 2vw;}.child {width: 10vw;height: 10vh;background-color: rgba(255, 235, 145, 0.82);margin-top: 4vw;} 

Сличан ефекат се примећује у понашању удубљења, када је висина родитељског елемента ауто постављена на доњу алинеју родитељских и подређених елемената. У овом случају, очуван је и приоритет веће алинеје.

 .parent {width: 25vw;height: auto;background-color: rgba(214, 254, 255, 0.82);margin-bottom: 2vw;}.child {width: 10vw;height: 10vh;background-color: rgba(255, 235, 145, 0.82);margin-bottom: 4vw;} 

Празне ставке

Празни елементи ће срушити горњу и доњу маргину. И формално они ће постојати, објекат ће се повећавати, али заправо ће елементи поред њега бити погођени само једном вредношћу.

 .first {background-color: black;width: 10vw;}.second_empty {width: 10vw;margin-top: 5vw;margin-bottom: 10vw;}.third {background-color: rgba(199, 90, 175, 0.76);width: 10vw;} 

Изузеци и правила

У многим разматраним случајевима додавање додатних својстава елементу омогућава елиминисање појаве колапса. Нестанак ефекта колапса настаје због чињенице да алинеји два елемента престају да се у потпуности додирују.

Проблеми колапса између родитељских и подређених елемената могу се избјећи само уметањем нечега између њих, на примјер, додавањем границе подређеном елементу. Да се ​​не догоди колапс између сусједних објеката, боље је прописати маргину у једном смјеру.

Нека уобичајена правила за употребу маргине:

• боље је писати индентс у једном правцу за све елементе (десно и доле);
• формирање растојања између елемената не би требало да се дешава на рачун дететних елемената;
• удубљење дјетета унутар родитеља од граница родитеља прописано је употребом подлоге родитеља, а не маргине дјетета.

Маргина у ЦСС-у је једна од особина елемента која вам омогућава да контролишете његову локацију на страници у односу на друге објекте. Својство има четири варијације које вам омогућавају да промените положај елемента хоризонтално и вертикално. Један од проблема коришћења маргине је колапс индената (комбиновање два индента у један).