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

Enlico
  • 23,259
  • 6
  • 48
  • 102
  • 5
    it's the line return, everything inside pre show as it is – Temani Afif Dec 31 '21 at 15:31
  • Try writing content (some...) on the same line as 
     tag. Content inside 
     is shown as it was written.
     – narwanimonish Dec 31 '21 at 15:35
  • Technically I knew what `
    ` 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 `
    ` to ignore leading and trailing `\n`s? This way, I could keep the code on its own lines
     – Enlico Dec 31 '21 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 ``? – Enlico Dec 31 '21 at 15:48
  • Does this answer your question? [Remove leading whitespace from whitespace: pre element](https://stackoverflow.com/questions/17365838/remove-leading-whitespace-from-whitespace-pre-element) – 0stone0 Dec 31 '21 at 16:03
  • For the first-line whitespace you can use `pre:first-line { line-height: 0px; }` – 0stone0 Dec 31 '21 at 16:04

1 Answers1

0

Try this code

code {
  white-space: break-spaces;
}
line before
<code>
some
  code
    here
</code> line after
Mahmoud Al-samman
  • 98
  • 6
  • Would be nice to have a reference. [_CSS `white-space` Property_](https://www.w3schools.com/cssref/pr_text_white-space.asp) doesn't seem to refer to `break-spaces`. – Enlico Dec 31 '21 at 15:56
  • Oh, well, [MDN Wed Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space) gives a better view on that. – Enlico Dec 31 '21 at 15:57
  • 1
    @Enlico the pre was removed here so this is a complete different code giving another different result – Temani Afif Dec 31 '21 at 15:58
  • @TemaniAfif, I hadn't noticed `
    ` was removed. Which kind of makes this a non-answer. Thanks for pointing that out.
     – Enlico Dec 31 '21 at 16:20