Задать вопрос
@FavnAristotel
html

Почему не работает margin-right для изображения?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <img class="plate" src="plate.png" alt="">
</body>
</html>

.plate{
    
    margin-right: -200px;
}

Хотя margin-left работает.
67a4bd553f88d817208684.png
  • Вопрос задан
  • 140 просмотров
2 комментария
Подписаться 1 Простой 2 комментария
Решения вопроса 1
JakeBerrimor
@JakeBerrimor
Ваш код работает, просто не так как вы ожидаете

В текущей реализации margin-right растягивает ваше изображение, вы это увидите если дадите body свойство overflow: auto;

Это связано с тем что ваше изображение не имеет конечной позиции с правой стороны, а например тот же margin-left имеет, например если вы напишете код как ниже, эффект будет противоположный
.plate {
    float: right;
    margin-right: 200px;
  }


Если вам нужно что бы изображение было справа то используйте пример что я вам написал, либо воспользуйтесь таким кодом если вам нужно сдвинуть от левого края на 200 пикселей, но смею предположить что вам нужна реализация от правого края 200px.
.plate {
    transform: translateX(200px);
}


Если вы пытаетесь центрировать изображение то воспользуйтесь flex-box'ом или grid сектой
дав корневому блоку такие свойства
display: flex;
justify-content: center;
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 120 000 ₽
Middle Project Manager (внутренние проекты)
FOXIBLE • Москва
от 70 000 ₽
Фронтендер/Фрилансер на удаленку
Netgineers GmbH
от 3 000 до 4 000 €
Ещё вакансии