如何使用CSS在元素边框前添加空白？（左侧红边框内侧间距需求）

嘿，我来帮你搞定这个需求！你想要在红色左侧粗边框的内侧留一段空白，而且空白得在元素内部、不能用margin-left，对吧？给你几个简单的实现方案：

方法一：使用内阴影配合padding-left #

用box-shadow的inset属性模拟红色左侧边框，再通过padding-left设置边框与内容之间的空白宽度，这样空白完全在元素内部，完美符合你的要求：

<p style="width:350px;height:200px;box-shadow: inset 3px 0 0 red; padding-left: 15px; background-color:grey;">
  Start editing to see some magic happen :)
</p>

• 调整3px可以改变红色边框的粗细，15px可以调整空白的宽度，按需修改就行。

方法二：用伪元素创建边框+padding-left #

通过伪元素单独生成红色左侧边框，再给父元素加padding-left留出空白，这种方式灵活性更高，比如你想让边框高度比元素矮一些也能轻松调整：

<p style="width:350px;height:200px;position: relative; padding-left: 15px; background-color:grey;">
  Start editing to see some magic happen :)
</p>
<style>
  p::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: red;
  }
</style>

• 如果想让边框上下有间距，只需要给伪元素的top和bottom设置数值（比如top: 10px; bottom:10px;）就行。

方法三：嵌套元素实现 #

最直观的方式就是在外层保留红色边框，内层放一个承载内容的元素，给内层元素加padding-left来创造空白：

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

• 这里把内层的span设置为display:block是为了让padding-left生效在整行，如果你不需要整行留白，也可以去掉这个属性。

内容的提问来源于stack exchange，提问作者Anna