将边框左右对齐设置

Question

我有左右边框，我希望它们更靠近，所以右边和左边会有一个白色空间。我尝试使用填充和负边距但没有成功。

.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%;
}

Answer 1

您可以使用伪元素: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>

Answer 2

您可以使用CSS3渐变而不是边框​​，并为元素的背景设置样式：

table{
  width: 100%;
}

td {
  background: linear-gradient(to right, 
    #fff 0%, 
    #fff 20%, #c00 20%, #c00 calc(20% + 2px), #fff calc(20% + 2px),
    #fff 80%, #c00 80%, #c00 calc(80% + 2px), #fff calc(80% + 2px), 
    #fff 100%);
  width: 50%; 
  height: 200px;
}

DEMO