0

Here's an HTML showing some code in between two short lines of text

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Uffa</title>
    <style type="text/css" media="screen">
pre {
  margin: 0;
}
    </style>
  </head>
  <body>
    line before
    <pre><code>
some
  code
    here
    </code></pre>
    line after
  </body>
</html>

When I hover with the mouse via devtools, I see this:

enter image description here

and I don't understand where the vertical spacing before and after the code chunk comes from.

Below is the live snippet, in which, however, only the top space of my example is reproduced.

pre {
  margin: 0;
}
line before
<pre><code>
some
  code
    here
</code></pre>
line after


I have simplified my use case a lot to ask this question. And after the the simplification, I still see the same issue I was concerned about.

However, as somebody suggested to use <pre> without nesting <code> into it, I should probably clarify that in the original use case, I'm making use of highlight.js, which prescribes to write code in between <pre><code class="language-whatever"> and </code></pre>.

6
  • 5
    it's the line return, everything inside pre show as it is Dec 31, 2021 at 15:31
  • Try writing content (some...) on the same line as <pre> tag. Content inside <pre> is shown as it was written. Dec 31, 2021 at 15:35
  • Technically I knew what <pre> was for... I just didn't think of the first and last character. Thanks. I guess anybody can post that as an answer. By the way, is there an "option" or something to tell <pre> to ignore leading and trailing \ns? This way, I could keep the code on its own lines
    – Enlico
    Dec 31, 2021 at 15:38
  • @TemaniAfif, why doens't the live snippet show the space between here and line after, considering that there is a \n between here and </code></pre>?
    – Enlico
    Dec 31, 2021 at 15:48
  • Does this answer your question? Remove leading whitespace from whitespace: pre element
    – 0stone0
    Dec 31, 2021 at 16:03

1 Answer 1

0

Try this code

code {
  white-space: break-spaces;
}
line before
<code>
some
  code
    here
</code> line after

4
  • Would be nice to have a reference. CSS white-space Property doesn't seem to refer to break-spaces.
    – Enlico
    Dec 31, 2021 at 15:56
  • Oh, well, MDN Wed Docs gives a better view on that.
    – Enlico
    Dec 31, 2021 at 15:57
  • 1
    @Enlico the pre was removed here so this is a complete different code giving another different result Dec 31, 2021 at 15:58
  • @TemaniAfif, I hadn't noticed <pre> was removed. Which kind of makes this a non-answer. Thanks for pointing that out.
    – Enlico
    Dec 31, 2021 at 16:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.