跨多个元素的连续边界

Question

我正在尝试将行号添加到代码段中。它是有效的，除了行号和代码行之间的边界不是连续的装饰性细节。取而代之的是小而丑陋的缝隙。

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>

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>

• 设置display: flex&pre中的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>