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

您可以使用位置为absolute的伪元素而不是红线的边框。然后，您还应该向padding-left元素添加一些text-indent或p。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

也许是线性渐变

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用p div围绕padding-left元素：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

＆＃13;

＆＃13;

last_product = Products.objects.order_by('-id')[0]

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;