CSS代码荧光笔 - 保证金预代码标签

请看看这个小提琴：Here CSS代码荧光笔 - 保证金预代码标签

我所寻找的是一个方法，在顶部（在一个黑色的圆形1和pre上边缘之间，以除去多余的空间标记）在第一个例子中，并使它看起来像第二个

第一个例子有一些额外的空间上面（除了从强元素的余量），并且我知道它是因为额外的新行<pre><code>后我didn不想删除额外的新行，因为删除它会使代码看起来真的不可读，所以我添加了这个

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

我认为这会工作，但我忘了，我有可能在第一线的多个strong标签。现在我不知道该怎么做。是否有解决我的问题的方法？

来源

2013-04-26 Sourabh

黑圈？在Chrome中，是的，在FF中，这是一个正方形 – 2013-04-26 16:16:59

pre pre strong，pre b，pre code {verticle-align：top}并减少了margin> pre> code> strong – 2013-04-26 16:18:24

@SteveWellens对不起，我忘了提及，代码仅适用于Chrome现在。 – Sourabh 2013-04-26 16:22:26

请尝试以下调整到你的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/

在Firefox测试在Windows 7上，应该工作正常，基本的CSS 2.1，没什么特别的。

如何工作

对于您的HTML源代码视觉格式化，你有<pre><code>后换行，它会在您的呈现内容的单一特征线，这将是1.00em高。

您可以通过将<code>块的顶部边距设置为-1.00em来进行补偿。但是，对于顶部/底部边距的工作，您需要将display: block设置为<code>元素。

来源

2013-04-26 16:22:21

简单而惊人的解决方案。谢谢 – Sourabh 2013-04-26 16:34:45

非常欢迎！感谢您花时间创建演示jsfiddle（+1！），欢迎来到SO！ – 2013-04-26 16:36:50

My Pleasure :)但为什么不用'inline-block'来处理负边距技巧？ – Sourabh 2013-04-26 16:45:33

你不应该改变任何风格。问题出现，因为您正在使用预标签。改变样式以解决这个问题将是一个黑客寻找修复标记结构内部预标签引擎浏览器的空间管理非常特别。

修改您的预内容如下，一切都会显得精致

您的代码

<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>

修改（第二行应该继续第一个...）

<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>

小提琴here

来源

2013-04-26 16:37:34 Fico

OP意识到这一点，并希望保留HTML源文件中的空白区域。但是，您的评估和理解是正确的。 – 2013-04-26 16:40:11

足够清楚@MarcAudet和nd txs的评论。当然，我投票了你的清洁解决方案！ – Fico 2013-04-26 16:46:46

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

而不是做这个的：

你想这样做：

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

请注意，您需要在第一线使用相同的空间缩进。

我看了几个其他的“标准webistes”。例如，StackOverflow为<pre><code>中的代码片段执行此操作。 highlight.js库的官方演示示例也使用相同的约定。这在HTML源代码中感觉有点难看，但经验法则似乎是<code>中的内容应该从<code>元素开始。

@Marc Audet提出的解决方案还有一个问题。如果您使用负顶部边距，如果您有一个边框（或者将来放置），它将在边框上覆盖。

如果您愿意使用一点JavaScript，则可能会有解决方法。你基本上可以修剪里面<pre><code>所有内容，只需通过使用这样的：

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

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

JavaScript方式的好处是，你有更多的freedome把<code>元素。另外，大多数代码片段可能是删除多余行的好主意。

来源

2014-04-10 23:43:35 ShitalShah

CSS代码荧光笔 - 保证金预代码标签

回答

相关问题