Установить position: absolute и отступы (margin)

Я понимаю, что это не самый актуальный ответ, но существует способ решения этой проблемы. Вы можете добавить элемент "spacer" внутрь элемента, который позиционируется абсолютно (absolute), с отрицательным нижним отступом и высотой, равной величине этого отрицательного нижнего отступа.

Вот пример кода:

HTML:

<div id="container">
    <div class="spacer"></div>
</div>

CSS:

/* тот же код для контейнера, но нужно удалить margin-bottom, так как он не влияет на позиционирование */

/* код для spacer, сделан классом, так как вам, возможно, нужно будет использовать его часто */
.spacer {
    height: 50px;
    margin: 0 0 -50px 0;
    /* margin: 20px 0 -50px 0; используйте это, если хотите, чтобы #container имел 'нижний отступ' в 20px */
    background: transparent; /* это нужно, если у родительского элемента #container другой фон от самого #container */
}

Таким образом, элемент "spacer" будет служить необходимым отступом для вашего контейнера, эффективно компенсируя влияние отрицательного нижнего отступа.

Когда вы используете margin-bottom для элемента, который позиционирован с помощью свойства top, ожидайте, что оно не повлияет на позицию этого элемента. Если элемент абсолютно позиционирован и имеет заданное значение для свойства top, то нижний отступ (margin-bottom) не будет влиять на его положение. Однако, если у элемента не задано свойство top, тогда margin-bottom может оказать влияние на его положение. Другими словами, ваш элемент будет оставаться на месте, управляемом top, и margin-bottom не будет оказывать эффекта на его вертикальное позиционирование.

Ваш код устанавливает элемент с абсолютным позиционированием, однако чтобы задать отступ справа, нужно использовать свойство right вместо width. Если у вас установлен width в calc(99% - 10px), это может привести к неправильным расчетам, особенно если вы хотите добавить отступ с правой стороны.

Вот пример, как можно исправить ваш код:

position: absolute;
top: 0px;
left: 10px;
right: 10px; /* Установите отступы справа */
height: 80%;

Используя right: 10px;, вы обеспечите отступ в 10 пикселей с правой стороны, и ширина элемента будет автоматически подстраиваться, сохраняя заданные отступы. Обратите внимание, что если вы хотите, чтобы элемент оставался с шириной 99% от родительского контейнера, можно оставить ваш вариант с width, но это может потребовать дополнительных настроек для отступов.

В некоторых случаях изменение position: absolute на position: relative также решает эту проблему. Если у вас есть возможность изменить позиционирование, это будет самым простым решением. В противном случае можно использовать промежуточный элемент от Джоуи, который тоже хорошо справляется с задачей.

Я нашел решение!!!

Установите минимальную высоту для контейнера, измените позиционирование с absolute на inherit, задайте свойству top подходящее вам значение, а display установите на inline-block.

Это помогло мне, когда я пробовал использовать позицию absolute, перемещал элемент с помощью свойства top и добавлял margin.

Вот пример CSS:

min-height: 42px;
display: inline-block;
top: 6px;
position: inherit;