Маржова стойност и възможности в CSS

CSS на Магрин контролира вдлъбнатината на елементите. Елементите в html са правоъгълници. Те имат граници, полета и подложка.

Маржовата зона е пространството извън границите на елемента. Свойството се използва за задаване на разстоянието между елементите и позиционирането им на страницата.

тире

Свойството Margin в CSS може да бъде зададено на%, px, vh / vw, em и rem. Маржовата стойност може да бъде наследена от родителския елемент (наследи) или автоматично да се изчисли от браузъра (автоматично). Стойностите за Margin в CSS могат да бъдат изписани по много начини (примери са дадени в em - мащабируеми единици, в зависимост от размера на шрифта на елемента).

Начини за задаване на стойности за отстъп:

• за всяка страна (отгоре, вдясно, отдолу, отляво) на елемента (например, стойността на горния външен отвор от ръба на централния елемент е посочена);

 .center {margin-top: 1em;} 

• за противоположни страни (първо стойностите за горната и долната част, след това за лявата и дясната);

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

• за три страни (стойността за маржа-отгоре е посочена първо, втората за ляво и дясно, третата за дъното);

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

• за всяка страна можете да зададете стойности последователно (margin-top, margin-right и т.н.) или в един ред отгоре до ляво по часовниковата стрелка;

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

• стойността на маржин елемента може да бъде еднаква за всяка страна;

 .center {margin: 1em;} 

• стойността на маржа може да не бъде зададена;

• стойността на маржа може да бъде отрицателна, например в CSS, марж-отгоре с отрицателна стойност премества елемента нагоре;

 .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;} 

С помощта на отрицателния марж-ляв и мард-топ можете да "преместите" елемента наляво или нагоре. Ако вече има предмети на мястото, където елементът се премества, тогава те се припокриват.

Марж-дъното и марж-дясно не засягат позицията на елемента, към който са приложени, но за други обекти става по-малък. Благодарение на това, на снимката, блокът с името на автора на цитата се изкачи в блока с цитат.

Автоматично и наследи

Използването на auto в CSS за марж и подравняване на текст с централната стойност има подобен ефект. Автоматично центрира елемента хоризонтално на еднакво разстояние от краищата на контейнера.

Преди да се определи автоматичната стойност, елементите са подредени една след друга без външни отстъпи (освен ако не е посочена друга маржин стойност) по същия начин, по който са подредени с нулев марж. След като зададете централната стойност, тя се премества в центъра на реда.

 .center {margin: auto;} 

Използването на наследената стойност предполага наследяване на стойността от родителския елемент. Да предположим, че родителският елемент има стойност в CSS margin-left, централният елемент има стойността, посочена в предишния пример.

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

Родителският елемент, в който са вградени всички останали елементи, е изместен малко по-ниско в сравнение със старата си позиция. Ако промените стойността на маржа на централния елемент на наследство, тогава центрирането ще изчезне като резултат и обектът, който наследява свойството, ще се придвижи надолу по същия начин.

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

Използването на CSS в Margin body може да доведе до отстъп. Обикновено тялото поставя маржа на нула и се използва запълване, ако е необходимо за отстъпки от елементи.

Съседни елементи

Поради факта, че външните отстъпи, всъщност, не са част от самия елемент, те често не работят съвсем точно, както бихте предположили под влиянието на други обекти. Един пример за този ефект е ефектът от вдлъбнатината.

Да предположим, че има два елемента, разположени един под друг, те имат нулеви полета. Ако добавите един от тези полета, нелипен марж, можете да видите как се измества един спрямо втория елемент. Предписвайки подобна стойност на втория елемент, виждаме, че в него се появяват външни отстъпи (тя се премества в дясно от старата си позиция), но разстоянието между тях не се увеличава, въпреки че те са подравнени по хоризонтална линия.

 .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;} 

Изключения и правила

В много от разглежданите случаи добавянето на допълнителни свойства към елемента позволява да се елиминира появата на срутване. Изчезването на ефекта на свиване се дължи на факта, че тирето на двата елемента престава да се свързва напълно.

Проблеми при свиване между родителски и дъщерни елементи могат да бъдат избегнати само чрез вмъкване на нещо между тях, например чрез добавяне на граница към подчинен елемент. За да не се получи срив между съседни обекти, е по-добре да се предпише маржа в една посока.

Някои общи правила за използване на полето:

• по-добре е да се записват отстъпи в една посока за всички елементи (дясно и надолу);
• формирането на разстоянието между елементите не трябва да става за сметка на детските елементи;
• вдлъбнатината на детето в рамките на родителя от границите на родителя се предписва, като се използва подложката на родителя, а не маржът на детето.

Маржът в CSS е едно от свойствата на елемент, който ви позволява да контролирате неговото местоположение на страницата спрямо други обекти. Свойството има четири варианта, които ви позволяват да променяте позицията на елемента хоризонтално и вертикално. Един от проблемите при използването на маржа е сривът на отстъпите (комбиниране на два отстъпа в един).