css властивість margin-left
CSS властивість margin-left встановлює відступ від лівого краю елемента.
Відстань встановиться від лівого краю поточного елемента до внутрішнього краю батьківського елемента.
Властивість може отримувати в якості значення, як довжину так і відсотки та ключове слово auto. Значення може бути від'ємне. У цьому випадку елементу буде розташований ближче до сусідніх елементів.
Зона для margin знаходиться поза межами(border), які в свою чергу знаходяться поза полями(padding).
В окремих випадках, де ширина елементу - повністю визначена та стає обмеженою (тобто, коли width, margin-left, border, padding, margin-right), margin-left буде проігнорована, і матиме те ж розрахункове значення нібито для width було вказане значення auto.
Негативні значення margin-top / margin-left зміщують елемент зі свого звичайного місця.
В CSS є інший спосіб домогтися схожого ефекту - а саме, position: relative. Але між ними є одна принципова відмінність.
При зсуві через margin сусідні елементи займають простір, що звільнився, на відміну від position: relative, при якому елемент візуально зсувається, але місце, де він був, залишається «зайнятим».
Тобто, елемент продовжує повноцінно брати участь в потоці.
| Нотатка: | Вертикальні відступи двох елементів можуть об'єднуватися. |
Синтаксис
margin-left: length|auto|initial|inherit;Властивість margin-left може отримувати 4 значення:
lengthВеличину лівого відступу можна вказувати в пікселях (px), відсотках (%) або інших допустимих для CSS одиницях. Значення може бути додатнім та від'ємним.
autoРозмір відступів буде автоматично розрахований браузером.
initialВстановлює цю властивість в значення без задання
inheritУспадкує значення властивості від свого батьківського елемента
| Значення без задання: | 0 |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.marginLeft="100px" |
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
| margin-left | 1.0 |
6.0 |
1.0 |
1.0 |
3.5 |
| Переглядач | |||
|---|---|---|---|
| margin-left | 1.0 |
1.0 |
1.0 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад
Демонстрація роботи властивості
Демонстрація роботи властивості
Відступ зліва буде 2см.
p {
margin-left: 2cm;
}