Почему margin right не работает
Перейти к содержимому

Почему margin right не работает

  • автор:

Почему margin right не работает

Изображение header_l.jpg — это левый скругленный угол шириной где то 300px. header_l.jpg — правый скругленный угол. header.jpg — это фоновое изображение, которое должно тянуться (repeat-x), заполняя расстояние от левого фона до правого.
Вот кусок html:

Проблема в том, что изображение header.jpg отступает слева как и задумано на 10px, но справа отступ не работает и перекрывает header_r.jpg еще и добавляя горизонтальные полосы прокрутки. Кто может сказать в чем дело .

Сообщение отредактировано: madv — 17.04.10, 21:17

Прикреплённый файл issue.jpg (94.1 Кбайт, скачиваний: 485)

Сообщ. #2 , 17.04.10, 21:47
Рейтинг (т): 135

Добавлено 17.04.10, 21:49
Если тебе нужны просто уголки, для чего ты все эти лишнии теги типа margin-right вообще используешь?
Ты и так вложил div’ы друг в друга — установи у каждого фоновое изображение и будет тебе счастье.
А если нужны отступы от краев, в #header_content используй padding.

Свойство margin

Свойство margin задаёт отступы вокруг элемента. У него есть несколько особенностей, которые мы здесь рассмотрим.

Объединение отступов

Вертикальные отступы поглощают друг друга, горизонтальные – нет.

Например, вот документ с вертикальными и горизонтальными отступами:

  

Горизонтальный 20px ← 40px → 20px Отступ

Вертикальный 20px

Расстояние по горизонтали между элементами SPAN равно 40px , так как горизонтальные отступы по 20px сложились.

А вот по вертикали расстояние от SPAN до P равно 20px : из двух вертикальных отступов выбирается больший max(20px, 15px) = 20px и применяется.

Отрицательные margin-top/left

Отрицательные значения margin-top/margin-left смещают элемент со своего обычного места.

В CSS есть другой способ добиться похожего эффекта – а именно, position:relative . Но между ними есть одно принципиальное различие.

При сдвиге через margin соседние элементы занимают освободившееся пространство, в отличие от position: relative , при котором элемент визуально сдвигается, но место, где он был, остаётся «занятым».

То есть, элемент продолжает полноценно участвовать в потоке.

Пример: вынос заголовка

Например, есть документ с информационными блоками:

  • водительское удостоверение на право управления транспортным средством соответствующей категории;
  • . и так далее.

Использование отрицательного margin-top позволяет вынести заголовки над блоком.

/* вверх чуть больше, чем на высоту строки (1.25em) */ h2

А вот, что бы было при использовании position :

При использовании position , в отличие от margin , на месте заголовков, внутри блоков, осталось пустое пространство.

Пример: вынос разрыва

Организуем информацию чуть по-другому. Пусть после каждого заголовка будет разрыв:

 

Заголовок


Текст Текст Текст.

Пример документа с такими разрывами:

Для красоты мы хотим, чтобы разрыв HR начинался левее, чем основной текст. Отрицательный margin-left нам поможет:

/*+ no-beautify */ hr.margin < margin-left: -2em; >/* для сравнения */ hr.position

Обратите внимание на разницу между методами сдвига!

  • hr.margin сначала сдвинулся, а потом нарисовался до конца блока.
  • hr.position сначала нарисовался, а потом сдвинулся – в результате справа осталось пустое пространство.

Уже отсюда видно, что отрицательные margin – исключительно полезное средство позиционирования!

Отрицательные margin-right/bottom

Отрицательные margin-right/bottom ведут себя по-другому, чем margin-left/top . Они не сдвигают элемент, а «укорачивают» его.

То есть, хотя сам размер блока не уменьшается, но следующий элемент будет думать, что он меньше на указанное в margin-right/bottom значение.

Например, в примере ниже вторая строка налезает на первую:

 
Первый
Второй div думает, что высота первого на 0.5em меньше

Это используют, в частности для красивых вносок, с приданием иллюзии глубины.

Итого

  • Отрицательные margin-left/top сдвигают элемент влево-вверх. Остальные элементы это учитывают, в отличие от сдвига через position .
  • Отрицательные margin-right/bottom заставляют другие элементы думать, что блок меньше по размеру справа-внизу, чем он на самом деле.

Отличная статья на тему отрицательных margin : The Definitive Guide to Using Negative Margins

Задачи

Нерабочие margin?

важность: 3

В примере ниже находится блок .block фиксированной высоты, а в нём – прямоугольник .spacer .

При помощи margin-left: 20% и margin-right: 20% , прямоугольник центрирован в родителе по горизонтали. Это работает.

Далее делается попытка при помощи свойств height: 80% , margin-top: 10% и margin-bottom: 10% расположить прямоугольник в центре по вертикали, чтобы сам элемент занимал 80% высоты родителя, а сверху и снизу был одинаковый отступ.

Однако, как видите, это не получается. Почему? Как поправить?

 .block < height: 150px; border: 1px solid #CCC; background: #eee; >.spacer 

Ошибка заключается в том, что margin при задании в процентах высчитывается относительно ширины. Так написано в стандарте.

При этом не важно, какой отступ: левый, правый. верхний или нижний. Все они в процентах отсчитываются от ширины. Из-за этого и ошибка.

Ситуацию можно исправить, например, заданием margin-top/margin-bottom в пикселях, если это возможно или, в качестве альтернативы, использовать другие средства, в частности, position или padding-top/padding-bottom на родителе.

Расположить текст внутри INPUT

важность: 5

Создайте с цветной подсказкой внутри (должен правильно выглядеть, не обязан работать):

В дальнейшем мы сможем при помощи JavaScript сделать, чтобы текст при клике пропадал. Получится красивая подсказка.

P.S. Обратите внимание: type="password" ! То есть, просто value использовать нельзя, будут звёздочки. Кроме того, подсказка, которую вы реализуете, может быть как угодно стилизована.

P.P.S. Вокруг INPUT с подсказкой не должно быть лишних отступов, блоки до и после продолжают идти в обычном потоке.

Подсказка

Надвиньте элемент с текстом на INPUT при помощи отрицательного margin .

Решение

Надвинем текст на INPUT при помощи отрицательного margin-top . Поднять следует на одну строку, т.е. на 1.25em , можно для красоты чуть больше – 1.3em :

Также нам понадобится обнулить «родной» margin у INPUT , чтобы не сбивал вычисления.

 input < margin: 0; width: 12em; >#placeholder 

Почему margin-right не работает для блочного элемента с position:absolute? а например margin-left работает в подобной ситуации?

Привет, подскажите пожалуйста , почему
margin-right не работает для блочного элемента с position:absolute
а например margin-left работает для блочного элемента с position:absolute
https://codepen.io/yrchik/pen/gOOOxpB

  • Вопрос задан более трёх лет назад
  • 3613 просмотров

Комментировать
Решения вопроса 1

а позиционирование откуда и куда?
по дефолту скорее
left top
вот и размышляйте
если прижат к левому краю, какие нахрен отступы будут справа

сделайте то же
только задайте right top
та же ситуация будет с margin left

т.е позиция right не определена
определена только позиция left,top

Ответ написан более трёх лет назад
Юра Сторчака @yrchi_k Автор вопроса
Так я ставлю margin-left: -20px; должно же смещать в обратную сторону
Ответы на вопрос 1

DELUX

Для позиционирования 'absolute' - margin не применяется
margin отлично применяется к position: relative;

Выше правильно написали, при 'position: absolute;' нужно использовать top, left, right, bottom - 'top: 0;' и т.д

еще, как вариант, можно использовать свойство 'transform', например вам нужно выставить элемент по центру (и по горизонтали, и по вертикали)

position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

Ответ написан более трёх лет назад

margin как раз таки применяется при абсолютном позиционировании, только от той стороны, от которой позиционируется
напр:
есть блок, который нужно отцентрировать по горизонтали
в таком случаи даем ему position absolute left:50%
и margin минусуем половину этого блока

если не понятно, скину ссылку

DELUX

natojezlo, приведите пример пожалуйста, где есть необходимость использовать margin при position: absolute

natojezlo, я понимаю что можно сделать и другими способами, но это как бы один из вариантов. и отбрасывать его не стоит

DELUX

natojezlo, Но, мне кажется - это "костыльный" вариант..

JohnG0ld

Александр Осадчий, Я бы тоже не стал отбрасывать данную особенность по двум причинам:
1. Вариант с margin более кроссбраузерный, чем с transform. Если известны размеры элемента и стоит задача оптимизировать под любимый IE, то вполне можно использовать и этот вариант.
2. Как уже было сказано, margin для absolute работает только с заданной позиционированием стороной. Но, если задать все 4 значения: left, right, top, bottom в значение 0, то сработает margin: auto; Вот такая вот особенность.

Свойство margin-right, не сдвигается блок

Да, можно использовать margin-left , но он отлично работает со всеми значениями, как со знаком, так и без. В чем моя проблема?

Отслеживать
68.2k 225 225 золотых знаков 80 80 серебряных знаков 223 223 бронзовых знака
задан 3 янв 2016 в 12:21
3,913 7 7 золотых знаков 48 48 серебряных знаков 87 87 бронзовых знаков

для display:inline-block код будет работать. Возможно просто не так как вы ожидаете. Можете показать ожидаемое поведение для отрицательного margin-right?

3 янв 2016 в 16:37
margin-left:150px;
3 янв 2016 в 16:59

тогда используйте margin-left. Вообще для позиционирования лучше использовать специальные инструменты.

3 янв 2016 в 17:37

если вы про position:relative и последующее использование top bottom right left то тут несколько проблематичнее ибо физически он остался на месте а визуально съехал

3 янв 2016 в 17:40

вариантов позиционирования может быть множество, и выбор конкретного зависит от конкретной разметки, и конкретного вида который нужно получить

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *