Как сделать отступ со всех сторон у резинового блока?

Question

[Cheizer]

Друзья, простая задача, но не пойму как решить.
Есть резиновый родитель в позиции relative, и вложенный в него дочерний блок в абсолютной позиции, как отступить от краев родителя?

<div class="wrap">
  <div class="box"></div>
</div>

.wrap{
  width:80%;
  min-height:400px;
  background:#ccc;
  position:relative;
    overflow: hidden;
  box-sizing: border-box;
    padding: 20px;
}
.box{
  position:absolute;
  width:100%;
  height:100%;
    border:1px #cc0000 solid;
}

Вот живой пример https://codepen.io/Cheizer/pen/wvvdyow

Не пойму как внутренний блок абсолютный, сделать всегда с отступом от края резинового родителя?

Answer 1

[Михаил]

left: 20px;
right: 20px;

и без width, аналогично с высотой

Comments

[Cheizer]

Благодарю!