Margin-right не работает на ширине 100%

У меня есть DIV, содержащий изображение и второй DIV. Родительский DIV установлен в position: absolute;, для дочернего DIV установлено значение position: relative. Идея заключается в том, что я отображаю свою подпись на фотографии поверх моего изображения.

У ребенка DIV должна быть 100% ширина родителя, минус 10px слева, справа и внизу плюс черный фон.

Здесь мой HTML:

<div class="span15 article-container">
    <img src="images/example-image-1.png" />
    <div class="photo-caption">This is the subtitle text on top.</div>
</div>

И вот мой CSS:

.article-container  {
                    position: relative;
                    }

.photo-caption  {
            width: 100%;
            background-color: black;
            position: absolute;
            bottom: 0px;
            margin-right: 10px;
            margin-left: 10px;
            margin-bottom: 10px;
            }

Левое поле выделяется .photo-caption за пределами .article-container. Правильная граница не имеет никакого эффекта.

Я также попытался исправить это с помощью выбора размера окна. Кажется, ширина ширины .photo-caption ниже ширины родителя, но все еще существует свес.

Ответ 1

относительный позиционный элемент, который вы позиционируете сверху, слева, справа, снизу, а не с пометкой.

Ответ 2

Лучше, если вы удалите width:100%. напишите вот так:

.photo-caption  {
            left:0;
            right:0;
            background-color: black;
            position: absolute;
            bottom: 0px;
            margin-right: 10px;
            margin-left: 10px;
            margin-bottom: 10px;
            }

Ответ 3

Проблема заключается в том, что width=100% даст photo-caption точную ширину article-container; добавление полей (или отступов) не повлияет на вычисление ширины. Вы можете сделать это самостоятельно, используя css calc(), чтобы стиль стал:

.photo-caption  {
    width: calc(100% - 20px); // 20 = right margin + left margin
    background-color: black;
    position: absolute;
    bottom: 0px;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
}

Обратите внимание, что вы можете проверить поддержку браузера calc() здесь

Ответ 4

Используйте padding в сочетании с box-sizing или вложенный блок с полями внутри вашего абсолютно позиционированного без полей.

Ответ 5

Вам не нужна ширина: 100%, если вы показываете блок. Это может решить все эти небольшие проблемы.

.photo-caption  {
        display:block;
        background-color: black;
        position: absolute;
        bottom: 0px;
        margin-right: 10px;
        margin-left: 10px;
        margin-bottom: 10px;
        padding:10px
        }

Ответ 6

Для:

Простой ответ: не пытайтесь использовать margin-right. Используйте "margin-left: xxxpx; '- сделайте xxx достаточно большим, чтобы максимально увеличить размер вашего поля div (Div Style = box). Нет необходимости в скрипке, можете указать, где именно вы хотите.

Ответ 7

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

Пример:

style="width:98%; margin-left: 1%;"

Ответ 8

Маржа - это расстояние от каждой стороны до соседнего элемента или границ документа.

Предел поля не означает, что он будет выталкивать элемент влево. Это означает, что он сгенерирует пространство справа. Если появится следующий элемент, он будет появляться после указанного margin -right. В вашем случае ширина равна 100%. Нет места для правого поля.

Точка путаницы: 1) визуальный эффект отличается от того, где ширина auto.Same margin создается в правом. Но из-за отсутствия свойства width.Width можно изменить.

2) Тот же эффект, когда элемент перемещается вправо.

Эти два вышеупомянутых пункта будут иметь разное представление о марже.