CSS代码荧光笔 - 前缀代码中的边距 [英] CSS code highlighter - margin in pre code tag

问题描述

请观看这个小提琴：这里

我要找的是一个方法来删除顶部的额外空间（黑色圆形 1 和顶部边缘前标签），并使其看起来像第二个

What I am looking for is a way to remove that extra space at top (the one between black circular 1 and top edge of pre tag) in first example and make it look like second one

第一个示例在它上面有一些额外的空间（除了强元素的边距）我知道它是因为< pre>< code> 之外的额外的新行我不想删除额外的换行，因为删除它使代码看起来真的不可读，所以我添加了这个

The first example has some extra space above it (except the margin from strong elements), and I know that its because of the extra new-line after <pre><code> I didn't wanted to remove that extra newline as removing it makes the code look really unreadable, so I added this

pre>代码> strong：first-of-type {margin-top：10px; }

我以为它会工作，但忘了我可能有多个 strong 标签在第一行。现在我不知道该怎么办。

I thought it'll work but I forgot that I might have multiple strong tags in first line. Now I don't know what to do. Is there a work-around for my problem ?

推荐答案

尝试对CSS进行以下调整：

Try the following adjustment to your CSS:

pre > code {
    white-space: pre;
    margin-top: -1.00em;
    display: block;
}

您也可以省略：

pre > code > strong:first-of-type { margin-top: 10px; }  /** not needed **/

小提琴： http://jsfiddle.net/audetwebdesign/WscKu/2/

测试

工作原理

对于HTML源代码的可视化格式化，您在< pre>< code> ，
后面有换行符

For visual formatting of your HTML source code, you have a line-feed after <pre><code>, which creates a single character line in your rendered content, which will be 1.00em tall.

您可以通过将顶部边距设置为<代码> 阻止为-1.00em。但是，要使上/下边距工作，您需要将 display：block 设置为< code> 元素。

You can compensate by setting the top margin to the <code> block to -1.00em. However, for top/bottom margins to work, you need to set display: block to the <code> element.

这篇关于CSS代码荧光笔 - 前缀代码中的边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！