Какие свойства нужно прописать, чтобы при уменьшении экрана минимальные отступы были по 50px (слева и справа) у блока с абсолютным позиционированием?

Question

Какие свойства нужно прописать, чтобы при уменьшении экрана минимальные отступы были по 50px (слева и справа) у блока с абсолютным позиционированием? также и при дальнейшем уменьшении экрана (50рх) - уменьшается только синий блок

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
     .box {
          position: absolute;
          bottom: 0px;
          top: 0px;
          left: 0px;
          right: 0px;
          margin: 0 auto;
          height: 500px;
          max-width: 500px;
          width: 100%;
          background-color: aqua;
      }
    </style>

</head>
<body>
    <div class="box">
    </div>
</body>
</html>

Answer 1

Вы выберите откуда отсчитываете позицию. left или right, top или bottom. Или используйте margin без left|top|right|bottom. А то если их указывать вместе они конфликтуют между собой.

.box {
  position: absolute;
  margin: 0 auto;
  left: 50vw;   /* отступ слева половина ширины окна */
  top: 50vh;    /* отступ сверху половина высоты окна */
  height: 500px;
  width: calc(100vw - 100px); /* на всю ширину окна минус два отсутпа по 50px */
  max-width: 500px;
  background-color: aqua;
  transform: translate(-50%, -50%); /* сместить блок вверх на пол высоты блока
                                       и влево на пол ширины блока */
}

<body>
  <div class="box">

  </div>
</body>

БЛОГ НА HUSL

Какие свойства нужно прописать, чтобы при уменьшении экрана минимальные отступы были по 50px (слева и справа) у блока с абсолютным позиционированием?

Ответы (1 шт):