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


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

Властивість `margin-right`

Відстань встановиться від правого краю поточного елемента до внутрішнього краю батьківського елемента.

Властивість може отримувати в якості значення, як довжину так і відсотки та ключове слово auto. Значення може бути від'ємне. У цьому випадку елементу буде розташований ближче до сусідніх елементів.

Зона для margin знаходиться поза межами(border), які в свою чергу знаходяться поза полями(padding).

В окремих випадках, де ширина елементу - повністю визначена та стає обмеженою (тобто, коли width, margin-left, border, padding, margin-right), margin-right буде проігнорована, і матиме те ж розрахункове значення нібито для width було вказане значення auto.

автор: Svitlana

Нотатка

Вертикальні відступи двох елементів можуть об'єднуватися.

автор: Svitlana

Синтаксис

margin-right: length|auto|initial|inherit;

Властивість margin-right може отримувати 4 значень:

length

Величину правого відступу можна вказувати в пікселях (px), відсотках (%) або інших допустимих для CSS одиницях. Значення може бути додатнім та від'ємним.

автор: Svitlana

auto

Вказує, що розмір відступів буде автоматично розрахований браузером.

автор: Svitlana

initial

Встановлює цю властивість в значення без задання

автор: Svitlana

inherit

Успадкує значення властивості від свого батьківського елемента

автор: Svitlana

Значення без задання: 0
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.marginRight="100px"

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft Internet Explorer
margin-right 1.0 1.0 1.0 3.5 6.0
Підтримка: мобільні переглядачі
Переглядач Mobile Google Android Mobile Mozilla Firefox Mobile Apple Safari
margin-right 1.0 1.0 1.0

Приклади

+ запропонувати свій приклад у пісочниці

У першого абзацу відступ 2 сантиметри праворуч — його правий край не сягає краю контейнера.

HTML

<p class="m">Абзац із відступом 2см праворуч.</p>
<p>Звичайний абзац на всю ширину.</p>

CSS

p {
    border: 1px solid #0172ad;
    padding: 6px;
}

.m {
    margin-right: 2cm;
}
автор: Svitlana

Динамічний приклад

автор: Svitlana

Демонстрація роботи властивості

автор: Svitlana

Демонстрація роботи властивості

автор: Svitlana

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Пропозиція правки

Ваша версія — : після перевірки замінить чинну. Нова порада чи нотатка — з'явиться на сторінці після перевірки.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія секції «»: після перевірки замінить чинну.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія опису «»: після перевірки замінить чинну.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Зворотний зв'язок
Вхід