Remove leading whitespace from whitespace: pre element

Question

I want to use a custom style for code snippets in my blog. I defined the following style:

mystyle {     background: #C3FFA5;     border: solid 1px #19A347;     color: #191919;     display: block;     font-family: monospace;     font-size: 12px;     margin: 8px;     padding: 4px;     white-space: pre;   } 

I use it as follows:

<mystyle> int main() {     cout << "Hello World" << endl; } </mystyle> 

This gives the following output. I have tried on Firefox and Google Chrome.

I want to remove the extra line at the start of the block. Obviously, I understand where the newline comes from, and that I can use <mystyle>int main() { instead. If I use <pre> instead of <mystyle>, there is no extra newline, so is it possible to do this with my custom style too?

Answer 1

Check out the answer to this very similar question:

.mystyle:first-line {     line-height: 0px; } 

Might require a modern-ish browser, though.

Answer 2

Adjust margin-top to whatever line-height you have set.

.text {     margin-top: -1em;     white-space: pre-line; } 

This works for FF too, which :first-line hack can't fix.