CSS代码荧光笔 - 预编码标签中的边距

Please look at this fiddle: Here

请看这个小提琴:这里

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

我正在寻找的方法是在第一个示例中删除顶部的额外空间(黑色圆形1和预标签顶部边缘之间的空间)并使其看起来像第二个

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 > code > strong:first-of-type { margin-top: 10px; }

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

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 ?

我认为它会起作用,但我忘了我可能在第一行有多个强标签。现在我不知道该怎么办。我的问题有解决办法吗?

3 个解决方案

#1

Try the following adjustment to your CSS:

尝试对CSS进行以下调整:

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

You can also leave out:

你也可以省略:

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

Fiddle: http://jsfiddle.net/audetwebdesign/WscKu/2/

Tested in Firefox on Windows 7, should work fine, basic CSS 2.1, nothing exotic.

在Windows 7上的Firefox中测试,应该工作正常,基本的CSS 2.1,没有什么异国情调。

How This Works

这是如何工作的

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.

对于HTML源代码的可视化格式,在

 之后有一个换行符,它在渲染内容中创建一个单字符行,其高度为1.00em。

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.

您可以通过将块的上边距设置为-1.00em来进行补偿。但是,要使top / bottom边距起作用,需要将display:block设置为元素。

#2

You should not change any style. The problem arises becouse you are working inside a pre tag. Changing styles to fix this will be a hack looking to fix a markup structure Inside pre tags space management by engine browsers is quite particular.

你不应该改变任何风格。问题出现了,因为你在预标签内工作。更改样式以解决此问题将是一个黑客,希望修复标记结构内部预标记引擎浏览器的空间管理是非常特殊的。

Modify your pre content as follows and everything will look fine

修改您的预先内容如下,一切都会很好

Your code

<pre><code>
<strong><b>1</b>#id-name</strong> <strong><b>2</b>.class-name</strong> {
    <strong><b>3</b>property: value;</strong>
}
</code></pre>

Modification (the second line should continue the first one...)

修改(第二行应继续第一行...)

<pre><code><strong><b>1</b>#id-name</strong> <strong><b>2</b>.class-name</strong> {
    <strong><b>3</b>property: value;</strong>
}
</code></pre>

fiddle here

#3

I bumped in to same issue and spent over an hour to find solution. I agree with @Fico's answer and wanted to support it by additional information.

我碰到了同样的问题,花了一个多小时才找到解决方案。我同意@Fico的回答,并希望通过其他信息来支持它。

Instead of doing this:

而不是这样做:

<pre><code>
    My code snippet
    Another line
</code></pre>

You want to do this:

你想这样做:

<pre><code>    My code snippet
    Another line
</code></pre>

Note that you need to use same spaces for indentation on first line.

请注意,您需要在第一行使用相同的空格进行缩进。

I looked at several other "standard webistes". For example, * does this for code snippets inside <pre><code>. The official demo examples of highlight.js library also uses the same convention. This feels bit ugly in HTML source, but The rule of thumb seems to be that your content inside <code> should start at the same line as <code> element.

我看了几个其他“标准网站”。例如,*为

 中的代码片段执行此操作。 highlight.js库的官方演示示例也使用相同的约定。这在HTML源代码中感觉有点难看,但经验法则似乎是中的内容应该与元素在同一行开始。

Also there is a problem with solution that @Marc Audet proposed. If you use negative top margin, it will overwrite on the border if you have one (or if you put it in future).

@Marc Audet提出的解决方案也存在问题。如果你使用负上边距,它将覆盖边框(如果你有一个)(或者如果你将来放置它)。

There is probably workaround if you are willing to use little bit of JavaScript. You can basically trim all contents inside <pre><code> simply by using this:

如果您愿意使用一点点JavaScript,可能会有解决方法。您基本上可以使用以下方法修剪

 中的所有内容:

  <script>
  $( document ).ready(function() {
    $(document.body).find("pre code").each(function() {
      $(this).html($.trim($(this).html()));
    });
  });
 </script>

You can see fiddle here: http://jsbin.com/bayawazi/2/edit

你可以在这里看到小提琴:http://jsbin.com/bayawazi/2/edit

The advantage of JavaScript approach is that you have much more freedome to put <code> element. Also most code snippets its probably good idea to remove extra lines.

JavaScript方法的优点是你可以放置元素更*。此外,大多数代码都可能会删除多余的线条。

#1