CSS margin-right — зовнішній відступ справа
CSS властивість margin-right встановлює відступ від правого краю елемента.
Відстань встановиться від правого краю поточного елемента до внутрішнього краю батьківського елемента.
Властивість може отримувати в якості значення, як довжину так і відсотки та ключове слово auto. Значення може бути від'ємне. У цьому випадку елементу буде розташований ближче до сусідніх елементів.
Зона для margin знаходиться поза межами(border), які в свою чергу знаходяться поза полями(padding).
В окремих випадках, де ширина елементу - повністю визначена та стає обмеженою (тобто, коли width, margin-left, border, padding, margin-right), margin-right буде проігнорована, і матиме те ж розрахункове значення нібито для width було вказане значення auto.
Загальний опис
автор: NagarD
- Нотатка
-
Вертикальні відступи двох елементів можуть об'єднуватися.
автор: 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" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 3.5 | 12 | 3 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
У першого абзацу відступ 2 сантиметри праворуч — його правий край не сягає краю контейнера.
HTML
<p class="m">Абзац із відступом 2см праворуч.</p>
<p>Звичайний абзац на всю ширину.</p>CSS
p {
border: 1px solid #0172ad;
padding: 6px;
}
.m {
margin-right: 2cm;
}Обидва ряди мають однакові проміжки 12 пікселів, але в першому вони зроблені через margin-right на кожній кнопці — і після останньої лишається зайвий відступ до пунктирної межі. У другому проміжки дає gap.
HTML
<p>margin-right на кожному елементі</p>
<div class="row m">
<span class="btn">A</span>
<span class="btn">B</span>
<span class="btn">C</span>
</div>
<p>gap на контейнері</p>
<div class="row g">
<span class="btn">A</span>
<span class="btn">B</span>
<span class="btn">C</span>
</div>CSS
body {
font-family: monospace;
font-size: 14px;
padding: 14px;
}
p {
margin: 18px 0 6px;
color: #444;
}
.row {
display: inline-flex;
padding: 6px;
border: 2px dashed #c0392b;
}
.m .btn {
margin-right: 12px;
}
.g {
gap: 12px;
}
.btn {
padding: 8px 16px;
background-color: #4a6fa5;
color: #fff;
border-radius: 4px;
}Динамічний приклад
HTML
<div class="box">
<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>margin-right</strong>.</p>
<p>Вона встановлює правий відступ для елемента на сторінці.</p>
<strong>margin-right: </strong>
<input type="number" class="input" id="num" value="24" step="10">px
<strong>;</strong>
</div>CSS
* {
box-sizing: border-box;
}
body {
font-family: monospace;
font-size: 16px;
line-height: 1.45;
height: 100vh;
}
.box {
background-color: #f7f7f7;
padding: 16px;
border: 8px solid #F74C32;
margin-right: 24px;
transition: all .15s ease-in;
}
.input {
margin-bottom: 36px;
width: 75px;
}
#select {
position: relative;
top: -4px;
width: 100px;
}JS
document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
var num = document.querySelector('#num').value;
document.querySelectorAll('.box').forEach((n) => n.style.setProperty('margin-right', num + 'px'));
}));Демонстрація роботи властивості
HTML
<div class="info">
<p>За допомогою властивості <code>margin-right</code> ми можемо встановити правий відступ для елементу.</p>
<p>Нижче розташований блок, для якого ми й додаємо правий відступ (в даному прикладі - <em>25px</em>). Результат можна побачити на другому блоці, який відсувається від першого на ті самі <em>25px</em>.</p>
</div>
<div class="wrapper">
<div class="block one">1</div>
<div class="block">2</div>
</div>CSS
* {
box-sizing: border-box;
}
body {
font-family: monospace;
font-size: 17px;
}
.info {
padding: 16px;
}
code {
font-weight: 700;
color: #444;
border-bottom: 2px solid #666;
}
.wrapper {
background-color: #ddd;
border: 2px solid #666;
height: 150px;
}
.block {
display: inline-block;
background-color: gold;
width: 75px;
text-align: center;
line-height: 75px;
box-shadow: 2px 2px 2px 0 #666;
}
.block.one {
margin-right: 25px;
}Демонстрація роботи властивості
HTML
<div>
<p>Цей текст має відступ праворуч, заданий за допомогою <strong>margin-right</strong>, який дорівнює 50%.</p>
</div>CSS
div {
background: #989;
padding: 25px;
}
p {
margin-right: 50%;
font-size: 2em;
background-color: #eee;
padding: 8px;
}Коментарі
Коментарів ще немає — будьте першим!