Código fuente y margenes
Hoy por la mañana, al estár editando una presentación utilizando reveal.js me
di a la tarea de agregar el bonito estilo Monokai que utiliza SublimeText a
mi presentación, todo iba marchando perfectamente hasta que gracias a la
propiedad box-shadow de un elemento pre me doy cuenta que habia un espacio
que al parecer no era margin o padding dentro de la etiqueta pre.
Entonces comencé a utilizar las herramientas de desarrollo de Firefox para
eliminar todo posible margin o padding que viniera con el tema para luego hacer
el cambio en las hojas de estilo. margin, padding, border, line-height ¡nada
funcionaba!, ese maldito espacio aún seguia ahí.
Después de unos 30 minutos tratando de eliminar todos los estilos del sitio para
saber que era ese espacio tuve que recurrir a googlear que pasaba cuando se
utiliza una etiqueta code dentro de una etiqueta pre y lo que me encontré
es para tomarlo con gracia por ser algo tan simple pero a la vez es muy
interesante saber que comportamiento tienen las etiquetas ya que después de saber
la razón de por que aparecian esos espacios todo era mas lógico.
El código que estaba utlizando era el siguiente:
<pre>
<code data-trim class="php5">
1.- Hello
<?php
echo " world!";
$variable = "2.- Hello PHP";
?>
</p>
<br>
<? echo $variable; ?> <!-- Con short_open_tag habilitado -->
<br>
<?= $variable ?> <!-- Forma abreviada de echo (v5.4+) -->
</code>
</pre>Si se dan cuenta, para cuestiones de una mejor lectura del código utilizé un
salto de linea entre las etiquetas pre y code tanto al abrilas como al
cerrarlas. En realidad el salto de línea no importa, lo que si importa son los
espacios que utilizé para indentar el bloque de la etiqueta pre y de acuerdo a
MDN la etiqueta pre hace lo siguiente:
The HTML Preformatted Text (<pre>) represents preformatted text. Text within this element is typically displayed in a non-proportional font exactly as it is laid out in the file. Whitespaces inside this element are displayed as typed.
Entonces, creo que con eso queda claro, olvidense de indentar esa etiqueta y eliminen todos esos molestos espacios que hay entre cada una de ellas.
<pre><code data-trim class="php5">
<?php
echo "Hello world!";
?>
</code></pre>