Question

我已经在我的博客中嵌入了一个github gist，结果代码在顶部和底部有一些额外的换行符，我想删除它。我的博客使用了bootstrap项目中的css，它还调整了字体：

body {
    font: 100%/1.5 sans-serif;
}

我created this fiddle作为问题的演示。

摆脱休息的最佳方法是什么？我应该为嵌入式要点的字体设计样式吗？谢谢！

Answer 1

这是因为行号和代码行中line-height不同。这是因为您使用相对line-height（取决于字体大小）和行号（字体大小）和行代码的不同字体大小（引导程序覆盖font-size和line-height { {1}}和pre元素）。要解决此问题，您可以重置github gists的引导样式：

<强> UPD：

code

证明：http://jsfiddle.net/W25px/8/

Answer 2

除了Sody的答案，您必须重置字体，您还必须更改white-space属性行为以对齐代码和数字行。

使用：

.gist pre,
.gist code {
    font: inherit;
    white-space: pre;
}

你的要点应该完美展示：JsFiddle

Answer 3

我想通了，这是行高。您需要确保代码清单行号的行高与代码本身的行高相匹配。

Answer 4

我不确定这是否是你要找的。

请查看 jsFiddle

 /* Your Css */
     body {
           font: 100%/1.35 sans-serif;
     }

我明白了吗？顶部和底部的额外线条？

Answer 5

在身体选择器* {line-height: normal;}

之前添加此样式

请参阅 Fiddle

你也可以使用line-height: 100%而不是正常（你会注意到一点点差异）

正如在另一个答案中所提到的，你也可以在里面使用行高

.gist pre,
.gist code {
    line-height: 100%;
}

如果这也无法解决您的问题，则可能已设置边距或填充值。修改margin: 0; padding: 0;

Answer 6

似乎github gist嵌入脚本以有趣的方式错误地将1.5行高度误导。

<div class="gist">
    <script src="https://gist.github.com/yosemitebandit/5295069.js?file=train.py">
    </script>
</div>

.gist {
    font:100%/1 sans-serif;
}

似乎是一个简单的修复。

嵌入式gists有额外的换行符

6 个答案: