跨多个元素的连续边框

Question

我正在尝试将行号添加到代码 sn-p。它正在工作，除了行号和代码行之间的边界不连续的装饰细节。相反，它有小而丑陋的差距。

检查元素似乎无法解释间距。

我也尝试过摆弄line-height，但在不显着影响间距的情况下没有任何效果。

pre {
    counter-reset: linenum;
    font-family: "DejaVu Sans Mono";
}

pre code {
    counter-increment: linenum;
}

pre code::before {
    content: counter(linenum);
    display: inline-block;
    width: 3em;
    text-align: right;
    padding-right: 0.5em;
    margin-right: 0.5em;
    color: #888;
    border-right: 1px solid #888;
}

<pre>
<code>Line one</code>
<code>Line two</code>
<code>Line three</code>
</pre>

Answer 1

问题是由pre 中设置的font-family 引起的，所以简单的解决方法是删除字体，默认为monospace

pre {
  counter-reset: linenum;
}

pre code {
  counter-increment: linenum;
}

pre code::before {
  content: counter(linenum);
  display: inline-block;
  width: 3em;
  text-align: right;
  padding-right: 0.5em;
  margin-right: 0.5em;
  color: #888;
  border-right: 1px solid #888;
}

<pre>
<code>Line one</code>
<code>Line two</code>
<code>Line three</code>
</pre>

如果你想保留字体，那么你有几种方法可以实现你想要的：

• 在pre 中设置display: grid

pre {
  counter-reset: linenum;
  font-family: "DejaVu Sans Mono";
  display: grid;
}

pre code {
  counter-increment: linenum;
}

pre code::before {
  content: counter(linenum);
  display: inline-block;
  width: 3em;
  text-align: right;
  padding-right: 0.5em;
  margin-right: 0.5em;
  color: #888;
  border-right: 1px solid #888;
}

<pre>
<code>Line one</code>
<code>Line two</code>
<code>Line three</code>
</pre>

• 在pre 中设置display: flex 和flex-direction: columnm

pre {
  counter-reset: linenum;
  font-family: "DejaVu Sans Mono";
  display: flex;
  flex-direction: column
}

pre code {
  counter-increment: linenum;
}

pre code::before {
  content: counter(linenum);
  display: inline-block;
  width: 3em;
  text-align: right;
  padding-right: 0.5em;
  margin-right: 0.5em;
  color: #888;
  border-right: 1px solid #888;
}

<pre>
<code>Line one</code>
<code>Line two</code>
<code>Line three</code>
</pre>

• 在code 中设置display: table-row

pre {
  counter-reset: linenum;
  font-family: "DejaVu Sans Mono";
  /*just be coeherent with table-row in the child */
  display: table
}

pre code {
  counter-increment: linenum;
  display: table-row
}

pre code::before {
  content: counter(linenum);
  display: inline-block;
  width: 3em;
  text-align: right;
  padding-right: 0.5em;
  margin-right: 0.5em;
  color: #888;
  border-right: 1px solid #888;
}

<pre>
<code>Line one</code>
<code>Line two</code>
<code>Line three</code>
</pre>