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

问题描述 投票：0回答：3

我正在寻找的是一种方法来删除第一个示例中顶部的额外空间（黑色圆形

1
和
pre
标签的顶部边缘之间的空间）并使其看起来像第二个

第一个示例上面有一些额外的空间（除了强元素的边距），我知道这是因为 

<pre><code>
之后的额外换行符我不想删除那个额外的换行符，因为删除它会使代码看起来真的不可读，所以我添加了这个

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

我以为它会起作用，但我忘记了第一行可能有多个 

strong
标签。现在我不知道该怎么办。有解决我的问题的方法吗？

pre > code {
    white-space: pre;
}

pre strong, pre b, pre code { font: normal 16px/18px consolas, sans-serif; }

pre {
    display: inline-block;
    background: url('../images/code-background.gif') rgb(230,230,230);
    padding: 0 20px 10px;
    -webkit-border-radius: 10px;
}

pre strong {
    display: inline-block;
    background: rgb(58,210,255);
    -webkit-border-radius: 5px;
    padding: 0 3px;
    position: relative;
}

pre > code > strong {
    margin-top: 25px;
    background: rgba(58,210,255,.4);
    padding: 3px;
}

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

pre strong > b {
    position: absolute;
    height: 18px; width: 18px;
    top: -18px; left: 8px;
    font-size: 14px;
    font-weight: bold;
    line-height: 18px;
    text-align: center;
    background: black;
    color: white;   
    -webkit-border-radius: 9px;
}

pre strong > b:after {
    content: '';
    position: absolute;
    top: .991em; left: 0.127em;
    border: 7px solid transparent;
    border-top-color: black;
}

ul.code-detail {
    list-style: none;
    font: normal 14px/21px 'Open Sans', sans-serif;
    max-width: 65%;
}

.code-detail li{
    position: relative;
    box-sizing: border-box;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dotted gray;
    padding-left: 30px;
}

.code-detail li a {
    color: #6FDEFF;
    font-weight: bold;
    font-size: 14px;
    line-height: 15px;
    text-decoration: none;
    border-bottom: 1px dashed #3AD2FF;
    -webkit-transition: all .5s;
}

.code-detail li a:hover {
    color: #3AD2FF;
    border-bottom: 1px solid #3AD2FF;
}

.code-detail li:nth-of-type(1) { border-top: none; }

.code-detail b {
    font: bold 15px/21px 'Open Sans', sans-serif;
}

.code-detail b:nth-of-type(1) {
    position: absolute;
    font-family: consolas;
    left: 2px; top: 10px;
    width: 20px; height: 20px;
    text-align: center;
    line-height: 20px;
    font-weight: bold;
    color: white;
    background-color: black;
    -webkit-border-radius: 10px;
}
<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>


<br>

<pre><code>
<strong><b>1</b>selector</strong> {
    <strong><b>2</b>property</strong>: <strong><b>3</b>value</strong>;
}
</code></pre>

html css margin pre
3个回答
10
投票

尝试对 CSS 进行以下调整：

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

您也可以省略：

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

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

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

pre strong, pre b, pre code { font: normal 16px/18px consolas, sans-serif; }

pre {
    display: inline-block;
    background: url('../images/code-background.gif') rgb(230,230,230);
    padding: 0 20px 10px;
    -webkit-border-radius: 10px;
}

pre strong {
    display: inline-block;
    background: rgb(58,210,255);
    -webkit-border-radius: 5px;
    padding: 0 3px;
    position: relative;
}

pre > code > strong {
    margin-top: 25px;
    background: rgba(58,210,255,.4);
    padding: 3px;
}

XXXpre > code > strong:first-of-type { margin-top: 30px; } /** <<<---- Ineffective code **/

pre strong > b {
    position: absolute;
    height: 18px; width: 18px;
    top: -18px; left: 8px;
    font-size: 14px;
    font-weight: bold;
    line-height: 18px;
    text-align: center;
    background: black;
    color: white;   
    -webkit-border-radius: 9px;
}

pre strong > b:after {
    content: '';
    position: absolute;
    top: .991em; left: 0.127em;
    border: 7px solid transparent;
    border-top-color: black;
}

ul.code-detail {
    list-style: none;
    font: normal 14px/21px 'Open Sans', sans-serif;
    max-width: 65%;
}

.code-detail li{
    position: relative;
    box-sizing: border-box;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dotted gray;
    padding-left: 30px;
}

.code-detail li a {
    color: #6FDEFF;
    font-weight: bold;
    font-size: 14px;
    line-height: 15px;
    text-decoration: none;
    border-bottom: 1px dashed #3AD2FF;
    -webkit-transition: all .5s;
}

.code-detail li a:hover {
    color: #3AD2FF;
    border-bottom: 1px solid #3AD2FF;
}

.code-detail li:nth-of-type(1) { border-top: none; }

.code-detail b {
    font: bold 15px/21px 'Open Sans', sans-serif;
}

.code-detail b:nth-of-type(1) {
    position: absolute;
    font-family: consolas;
    left: 2px; top: 10px;
    width: 20px; height: 20px;
    text-align: center;
    line-height: 20px;
    font-weight: bold;
    color: white;
    background-color: black;
    -webkit-border-radius: 10px;
}
<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>


<br>

<pre><code>
<strong><b>1</b>selector</strong> {
    <strong><b>2</b>property</strong>: <strong><b>3</b>value</strong>;
}
</code></pre>

这是如何工作的

对于 HTML 源代码的可视化格式，您可以在 

<pre><code>
之后换行， 这会在渲染的内容中创建单个字符行，其高度为 1.00em。

您可以通过将 

<code>
块的上边距设置为 -1.00em 来进行补偿。 但是，要使顶部/底部边距起作用，您需要将 
display: block
设置为 
<code>
元素。

2
投票

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

而不是这样做：

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

你想这样做：

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

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

我查看了其他几个“标准网站”。例如，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 方法的优点是您可以更自由地放置 

<code>
元素。此外，大多数代码片段删除多余的行可能是个好主意。

1
投票

您不应该改变任何风格。 出现问题是因为您正在预标记内工作。 改变样式来解决这个问题将是一个修复标记结构的黑客 引擎浏览器对预标记空间的管理是非常讲究的。

按如下方式修改您的预置内容，一切看起来都会很好

您的代码

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

小提琴这里

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.