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

Question

[Senseich]

Хочу сразу сказать, что верстку править не желательно!

Есть блок с position: relative;
В нем ссылка с position:absolute:
И блок с текстом, заголовок position: relative;

Нужно реализовать внутреннюю рамку с отступом 5px
Я пробовал с псевдоэлементом и ссылке назначал такие св-ва:

height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
   margin: 5px:
   border: 1px solid #fff;

Но элемент с рамкой уезжает: prntscr.com/hq65k3

Как сделать правильно, я немного запутался?

Answer 1

[Василь Бойко]

Замените свои стили, вот на эти:

top: 5px;
right: 5px;
bottom: 5px;
left: 0;
position: absolute;
border: 1px solid #fff;

Comments

[Senseich]

Спасибо, только left тоже 5px, а так всё работает *)

[Василь Бойко]

ой, да, затупил)

Answer 2

[Илья]

Можно так:

top: 5px;
left: 5px;
position: absolute;
border: 1px solid #fff;
box-sizing: border-box;
width: calc(100% - 10px);
height: calc(100% - 10px);

Но лучше так: top: 5px; right: 5px; bottom: 5px; left: 5px; =)

Answer 3

[ValentinWebDev]

https://jsfiddle.net/ppnq22q4/

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