html - 将左右边框更靠近设置

我有左右边界，我希望它们靠得更近，因此左右两侧会有空白。我尝试使用填充和负边距没有成功。

.verticalLine {
  display: table-cell;
  height: 100%;
  width: 10%;
  border-left: 0.13em solid #ff0000;
  border-right: 0.13em solid #ff0000;
}

<div class="verticalLine">
</div>

我希望这两条红线更靠近，以便在它们的左右两侧留一些空白。 （我不想更改此div的宽度）

编辑：代码已更新

<div style="display: table-row;">
<p>Lfdskopfdksoppokfsdpokfs</p>
<div class="verticalLine">
</div>
</div>

p{
  word-break: break-all;
  display: table-cell;
    width: 45%;
}
.verticalLine:before{
  content: "";
  display: block;
  border-left: 0.13em solid #ff0000;
  border-right: 0.13em solid #ff0000;
  height: 100%;
  width: 60%;
  margin-left: 20%;
  box-sizing: border-box;
}
.verticalLine {
  display: table-cell;
  width: 10%;
}

最佳答案

您可以只使用伪元素:before来创建垂直线。只需使其比其父级小即可，例如60%并为它留出边距的相应边距，在这种情况下，例如margin-left: 20%;。最后，使用box-sizing: border-box;将边框包括在宽度中并适当地将元素居中。

我添加了一个黑色边框，以便于查看：

.line {
  display: table-cell;
  height: 100px;
  width: 10%;
  border: 1px solid;
}
.line:before {
  content: "";
  display: block;
  border-left: 0.13em solid #ff0000;
  border-right: 0.13em solid #ff0000;
  height: 100%;
  width: 60%;
  margin-left: 20%;
  box-sizing: border-box;
}

<div class="line">
</div>

关于html - 将左右边框更靠近设置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39455072/