CSS code highlighter - margin in pre code tag

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

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

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 ?

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>

Solution

Try the following adjustment to your 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 **/

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

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>

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.

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.