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代碼熒光筆 - 保證金預代碼標籤

回答

相關問題