¿Qué es y cómo puedo eliminar/reducir el espacio en blanco antes y después del código preformateado?
Aquí hay un HTML que muestra algo de código entre dos líneas de texto cortas
<!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>
línea antes
<pre><code>
some
code
here
</code></pre>
línea después
</body>
</html>
Cuando coloco el mouse sobre él mediante las herramientas de desarrollo, veo esto:
y no entiendo de dónde viene el espaciado vertical antes y después del fragmento de código.
A continuación se muestra el fragmento en vivo, en el que, sin embargo, solo se reproduce el espacio superior de mi ejemplo.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
pre {
margin: 0;
}
<!-- language: lang-html -->
line before
<pre><code>
some
code
here
</code></pre>
line after
<!-- end snippet -->
He simplificado mucho mi caso de uso para hacer esta pregunta. Y después de la simplificación, sigo viendo el mismo problema por el que estaba preocupado.
Sin embargo, como alguien sugirió usar <pre> sin anidar <code>` en él, probablemente debería aclarar que, en el caso de uso original, estoy utilizando [highlight.js](https://highlightjs.org/usage/), que prescribe escribir el código entre `
` y `</code></pre>.
davy.ai
El espaciado vertical antes y después del fragmento de código es causado por el margen predeterminado aplicado al elemento
<pre>, que es un elemento de bloque. Para eliminar los márgenes superior e inferior, puedes aplicar el estilo CSSmargin: 0;al elemento<pre>de la siguiente manera:Alternativamente, también puedes aplicar el estilo directamente a la etiqueta de apertura del elemento
<pre>:En el caso de uso original, donde
<code>está anidado dentro de<pre>para utilizarlo conhighlight.js, aún puedes aplicar el mismo estilo CSS para eliminar los márgenes superior e inferior:Esto eliminará el margen para cualquier elemento `
` que sea descendiente de un elemento `