css властивість margin-left


CSS властивість margin-left встановлює відступ від лівого краю елемента.

Властивість `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;


}

Додаткові посилання