.center {
margin-top: 1em;
}
.center {
margin: 1em, 0.5 em;
}
.center {
margin: 0em 1.1 em 2em;
}
.center {
margin: 0.5 em 1em 1.5 em 2em;
}
.center {
margin: 1em;
}
.center {
margin-top: -1em;
}
.center {
margin: -1em;
}
Негативний відступ часто використовують для зміни положення елемента. При використанні негативного margin елемент звільняє місце для інших при переміщенні. Елементи, до яких застосовано властивість, можуть перетинати інші елементи або дозволяти "наїжджати" на себе інших елементів.
.first {
background-color: white;
border: 006 vw solid gold;
box-shadow: 000.09 vw gold;
width: 50vw;
padding: 2vw;
margin-bottom: -1vw;
margin-left: -9vw;
}
.second {
background-color: black;
color: white;
font-size: 0.7 rem;
width: 10vw;
padding: 0.5 vw;
margin-left: 27vw;
}
З допомогою негативних margin-left margin-top можна "зрушити" елемент ліворуч чи вгору. Якщо на місці, куди переміщається елемент, вже є об'єкти, тоді він їх перекриває.
Margin-bottom та margin-right не впливають на стан елемента, до якого застосовуються, але для інших об'єктів він стає менше. Завдяки цьому на картинці блок з ім'ям автора цитати "заліз" на блок з цитатою.
Використання auto в CSS у margin) і text-align зі значенням center мають схожу дію. Auto центрує елемент по горизонталі на рівній відстані від меж контейнера.
До вказівки значення auto елементи розташовуються один за одним без зовнішніх відступів (якщо не вказано інше значення margin) так само, як вони розташовані при нульовому margin. Після вказівки значення center зміщується до центру ряду.
.center {
margin: auto;
}
Використання значення inherit передбачає спадкування значення від елемента-батька. Припустимо, батьківського елементу прописано значення в CSS margin-left, у елемента center варто значення, вказане в попередньому прикладі.
body {
margin-top: 1em;
}
.center {
margin: auto;
}
Батьківський елемент, в який вкладено всі інші елементи, змістився трохи нижче щодо свого старого положення. Якщо змінити у елемента center значення margin на успадковане, то в результаті центрування зникне, а об'єкт, який успадковує властивість, таким же чином зміститься вниз.
body {
margin-top: 1em;
}
.center {
margin: inherit;
}
Використання CSS Margin у body може призвести до згортання відступів. Зазвичай у body обнуляють значення margin, при необхідності відступу від елементів використовують padding.
З-за того, що зовнішні відступи, по суті, не є частиною самого елемента, вони часто працюють не зовсім так, як можна було б припустити, під впливом інших об'єктів. Одним з прикладів такого впливу є ефект схлопування відступів.
Припустимо, є два елементи, які розташовані один під іншим, у них нульові margin. Якщо додати одному з них значення margin, відмінне від нуля, видно, як один зрушується щодо другого елемента. Прописавши аналогічне значення другого елементу, бачимо, що у нього з'являються зовнішні відступи (він зсувається вправо від свого старого положення), але відстань між ними не зростає, хоча вони вирівнюються по горизонтальній лінії.
Подібний ефект буде спостерігатися, якщо встановити різні значення margin для двох елементів. Перемагає значення більшого margin, саме цього значення буде дорівнює відстань між елементами.
.first {
background-color: black;
border: 0.1 vw solid gold;
margin: 3vw;
width: 10vw;
}
.second {
background-color: black;
border: 0.1 vw solid darkslateblue;
margin: 5vw;
width: 10vw;
}
Margin некоректно працює у випадку вкладених елементів, що мають відступи. Якщо верхній відступ прописаний батьківського і дочірнього елементів, то спрацює тільки один з них.
.parent {
width: 40vw;
height: 20vh;
background-color: rgba(214254255 082);
margin-top: 2vw;
}
.child {
width: 10vw;
height: 10vh;
background-color: rgba(255235145 082);
margin-top: 2vw;
}
На малюнку наведено приклади поведінки елементів і тоді, коли значення margin батьківського і дочірнього елементів різні. Як видно, якщо у дочірнього вказано значення margin-top більше, ніж у батьківського, то батьківський зміщується саме на значення, вказане у дочірнього елемента.
.parent {
width: 25vw;
height: 20vh;
background-color: rgba(214254255 082);
margin-top: 2vw;
}
.child {
width: 10vw;
height: 10vh;
background-color: rgba(255235145 082);
margin-top: 4vw;
}
Подібний ефект спостерігається у поведінці відступів, коли при висоті батьківського елемента auto встановлюється нижній відступ батьківського і дочірнього елементів. Пріоритет більшого відступу зберігається і в цьому випадку.
У порожніх елементів будуть схлопуватися верхні і нижні поля. Причому формально вони будуть існувати, об'єкт буде збільшуватися, але фактично на елементи, що знаходяться поруч з ним, буде впливати тільки одне значення.
.first {
background-color: black;
width: 10vw;
}
.second_empty {
width: 10vw;
margin-top: 5vw;
margin-bottom: 10vw;
}
.third {
background-color: rgba(19990175 076);
width: 10vw;
}