CSS: как добавить пробел перед границей элемента

Question

Моей работе потребовалось небольшое пространство перед левой красной рамкой (изображение прилагается для справки), как этого добиться? Мой код ниже. (Пожалуйста, посмотрите внимательно на красную границу, и пространство между черной тонкой границей и красной толстой границей - это то, чего я хочу достичь, я не хочу оставлять поле слева, это пространство внутри div)

<p style="width:350px;height:200px;border-left:3px solid red;background-color:grey;">
  Start editing to see some magic happen :)
</p>

Answer 1

Возможно линейный градиент вместо

p {
  margin: 1em auto;
  padding-left: 6px;
  background: linear-gradient(to right,
  transparent 3px, red 3px,
  red 6px, transparent 6px
  );
  border: 1px solid grey;
}

<p style="width:350px;height:200px">
  Start editing to see some magic happen :)
</p>

Answer 2

Вы можете окружить свой p элемент div с padding-left:

<div style="padding-left:5px;background-color:grey;border:1px solid #000;">
<p style="width:350px;height:200px;border-left:3px solid red;margin:0px">
  Start editing to see some magic happen :)
</p>
</div>

Answer 3

Вы можете использовать псевдоэлемент с позицией absolute вместо границы для красной линии. Затем вы также должны добавить элемент padding-left или text-indent к p элементу.

p {
  border: 1px solid black;
  position: relative;
  padding-left: 10px;
}

p:before {
  content: '';
  border-left: 3px solid red;
  height: 100%;
  position: absolute;
  left: 5px;
}

<p style="width:350px;height:200px;background-color:grey;">
  Start editing to see some magic happen :)
</p>

Answer 4

p:before{
position: absolute;
left: -9px;
top: 0;
bottom: 0px;
border: 1px solid black;
content: "";
width: 5px;
border-right: 0;
}

<p style="width:350px;height:200px;margin-left:5px;border-left:3px solid red;background-color:grey;position:relative">
  Start editing to see some magic happen :)
</p>