marginОсобина дефинише најистуренији део кутије модела, стварајући простор око елемента, ван било каквих дефинисаних граница.
Маргине се постављају према дужинама, процентима или кључној речи autoи могу имати негативне вредности. Ево примера:
.box ( margin: 0 3em 0 3em; )margin је стенографско својство и прихвата до четири вредности, приказане овде:
.box ( margin: || || || )Ако је постављено мање од четири вредности, вредности које недостају претпостављају се на основу дефинисаних. На пример, следећа два скупа правила добила би идентичне резултате:
.box ( margin: 0 1.5em; ) .box ( margin: 0 1.5em 0 1.5em; )Дакле, ако је дефинисана само једна вредност, ово поставља све четири маргине на исту вредност. Ако су декларисане три вредности, јесте margin: (top) (left-and-right) (bottom);.
Било која појединачна маргина може се декларисати помоћу лонгханда, у том случају бисте дефинисали само једну вредност по својству:
.box ( margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; )auto и центрирање
Свако од својстава маргине такође може прихватити вредност auto. Вредност у autoоснови говори прегледачу да дефинише маргину за вас. У већини случајева вредност вредности autoбиће еквивалентна вредности 0(што је почетна вредност за свако својство маргине) или у супротном, било који простор доступан на тој страни елемента. Међутим, autoзгодно је за хоризонтално центрирање:
.container ( width: 980px; margin: 0 auto; )У овом примеру се раде две ствари за хоризонтално центрирање овог елемента у расположивом простору:
- Елементу је задата ширина
- Лева и десна маргина су постављене на
auto
Без наведене ширине, autoвредности у суштини не би имале ефекта, постављајући леву и десну маргину на 0или на било који други расположиви простор у родитељском елементу.
Такође треба истаћи да autoје корисно само за хоризонтално центрирање, па употреба autoза горње и доње маргине неће усредсредити елемент вертикално, што може бити збуњујуће за почетнике.
Маргине које се скупљају
Вертикалне маргине на различитим елементима који се додирују (тако да немају садржај, подлоге или границе које их раздвајају) урушиће се, формирајући једну маргину која је једнака већој од суседних маргина. То се не дешава на хоризонталним маргинама (лево и десно), већ само вертикално (горе и доле).
За илустрацију узмите следећи ХТМЛ:
Collapsing Margins
Example text.И следећи ЦСС:
h2 ( margin: 0 0 20px 0; ) p ( margin: 10px 0 0 0; )У овом примеру h2елемент има задњу маргину од 20 пиксела. Елемент одломка, који одмах следи у извору, има горњу маргину постављену на 10 пиксела.
Чини се да здрав разум сугерише да би дебљина вертикалне маргине између h2и пасуса била укупно 30 пиксела (20 пиксела + 10 пиксела). Али због пада маргине, стварна дебљина на крају износи 20 пиксела. Ово је приказано на доњој уграђеној оловци:
Иако се урушавајуће маргине на први поглед могу учинити неинтуитивнима, оне су заправо корисне из неколико разлога. Прво, спречавају празне елементе да додају додатни, обично непожељни, вертикални простор маргине.
Друго, омогућавају доследнији приступ декларисању универзалних маргина преко елемената странице. На пример, наслови обично имају вертикални простор маргина, па тако и пасуси. Ако се маргине не сруше, заглавља која следе пасусе (или обрнуто) често ће захтевати ресетовање маргина на једном од елемената како би се постигла доследна количина вертикалног размака.
Треће, колапс маргине се односи и на угнежђене елементе. Погледајте следећу оловку:
Овде елемент одломка има горњу маргину постављену на 30 пиксела и угнежђен је унутар divелемента са горњом маргином од 40 пиксела. Поред тога, h2елемент има доњу маргину од 20 пиксела.
Поново, здрав разум би предложио да укупни простор вертикалне маргине овде буде 90 пиксела (20 пиксела + 40 пиксела + 30 пиксела), али уместо тога, све маргине се урушавају у једну маргину од 40 пиксела (највећу од три). Ово је корисно у већини случајева, јер није потребно редефинисати ниједну горњу маргину да бисте уклонили додатни вертикални простор.
Негативне марже
Као што можете претпоставити, док позитивна маргина одбацује друге елементе, негативна маргина ће повући сам елемент у том правцу или повући друге елементе према њему.
Ево примера контејнера са облогом, а заглавље х2 има негативне маргине које се повлаче кроз ту облогу назад до ивица:
Погледајте случај
најчешће коришћене оловке за негативне маргине Цхриса Цоииера (@цхрисцоииер)
на ЦодеПен-у.
Ево примера где први пасус има негативну доњу маргину, што повлачи следећи пасус.
Погледајте
доњи одломак негативне маргине оловке, Цхрис Цоииер (@цхрисцоииер)
на ЦодеПен-у.
Подршка прегледача
| Хром | Сафари | Фирефок | Опера | ИЕ | Андроид | иОС |
|---|---|---|---|---|---|---|
| Извођење радова | Извођење радова | Извођење радова | Извођење радова | Извођење радова | Извођење радова | Извођење радова |
ИЕ6 је склон удвострученој грешци са плутајућом маргином, која се у већини случајева може решити додавањем display: inlineплутајућег елемента.