9

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

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

我创建了这个小提琴作为问题的演示。

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

4

6 回答 6

1

发生这种情况是因为line-height行号和代码行不同。这是因为您对行号（您的字体大小）和行代码（引导程序覆盖和for和元素）使用相对line-height（取决于字体大小）和不同的字体大小。要解决此问题，您可以重置 github gists 的引导样式：font-sizeline-heightprecode

升级版：

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

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

于 2013-04-17T14:29:59.487 回答
1

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

和：

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

您的要点应该完美显示：JsFiddle

于 2013-04-18T17:52:41.633 回答
0

在正文选择器之前添加此样式* {line-height: normal;}

看到这个小提琴

你也可以line-height: 100%比正常使用（你会注意到一点不同）

正如在另一个答案中提到的那样，您也可以在里面使用 line-height

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

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

于 2013-04-19T04:56:46.293 回答
0

我不确定这是否是您正在寻找的。

请看看这个jsFiddle

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

我明白你的意思了吗？顶部和底部的多余线条？

于 2013-04-14T21:42:01.300 回答
0

似乎 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;
}

似乎是一个简单的修复。

于 2013-04-20T02:54:07.893 回答
0

我想通了，它是行高。您需要确保代码列表行号的行高与代码本身的行高匹配。

于 2013-04-13T02:58:55.527 回答