CSS марж собственост: външна вдлъбнатина на елементи

Характеристиката на маркера CSS контролира външните вдлъбнатини на елемента. Като го използвате, можете да зададете разстоянието между съседни блокове или да преместите детската възлова точка от родителската граница. Маргините не участват в блоковия модел на CSS и не влизат в ширината и височината на елемента.

Синтаксис на собствеността

Има обща собственост на CSS margin, с която можете да посочите стойността на всички тирета наведнъж, както и четири отделни свойства за всяка страна:

• марж ляв;
• марж-надясно;
• марж-нагоре;
• марж дъно.

Можете да определите стойността на тирето в пиксели, относителни единици (em, rem) или проценти. Във втория случай, за 100%, широчината на родителския елемент винаги ще бъде приета, дори и за горната и долната страна.

родител {width: 500px; height: 100px;} child {margin-left: 10% - // 500px * 10% = 50pxmargin-top: 10%

Маршрутът на CSS може да бъде отрицателен.

Когато използвате груповия синтаксис, трябва да прехвърлите от един на четири параметъра, като посочите страните в правилния ред.

• Едно: за всички партии наведнъж.
• Две: за горната и долната част и отделно за страните.
• Три: за горната страна, страни и дъно.
• Четири: избройте страни по посока на часовниковата стрелка, като започнете отгоре.

елемент {margin: 20px;} елемент {margin: 20px 30px;} елемент {margin: 20px 30px 40px;} елемент {margin: 20px 30px 40px 50px;}

Алгоритми за вмъкване

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

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

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

Свиването на маржовете

На снимката са показани два елемента, разположени един под друг с настроени външни тирета. В първия вариант се комбинират долните и горните полета на блоковете, във втория - те се събират заедно. Какъв тип поведение изглежда по-логично?

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

Премахване на маржин извън родителски права

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

На снимката е показан детският блок, който е осеян с очакванията, че ще се отдалечи от горната граница на родителския контейнер. Вместо това, ръбът е изваден от ограниченията на родителя и го е отблъснал от границата на по-стария предшественик.

Ако родителят има рамка, подложка или свойство на препълване, равно на скрито или превъртане, не се извършва отстраняване на маржа.

Центриране на центъра

Има известен трик, който ви позволява да подравнявате блоковия елемент в центъра на родителя с помощта на външни отстъпи. За да направите това, трябва да зададете ширината и да зададете лявото и дясното поле на автоматично.

елемент {width: 400px; margin: 0 auto-}

В този случай има едно преразпределение на свободното пространство еднакво от двете страни на елемента. Това работи само за блокови тип възли със специфична ширина. Ако не зададете размера, елементът на блока се простира до целия контейнер, като не оставя място за вдлъбнатина.