跨多个元素的连续边框

问题描述

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

Inspect 元素似乎没有解释间距。

我也试过摆弄 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>

解决方法

该问题是由 font-family 中设置的 pre 引起的，因此简单的解决方法是删除字体，该字体将默认为 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>

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

• 在 display: grid 中设置 pre

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>

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

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>

• 在 display: table-row 中设置 code

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>