css pre标签

浏览器:firfox49.0.2

在使用<pre>标签输出格式化文本的时候,遇到了一个小问题. 要在页面的底部输出两行文本,但是最后一行的文字总是距离屏幕的底部太大.下面图中的样子:

相关的代码:

  <footer>
         <div class="navbar-fixed-bottom">
             <pre class="text-center" style="margin-bottom: 0px;">
                   住着抠门的老翁
              email : [e-mail]
             </pre>
         </div>
     </footer>

刚开始以为是div和pre标签的样式导致的,所以通过下面的调试器查看了一下:

并没有发现pre.text-center的样式有其对应的样式规则.后来通过盒模型查看了一下,才发现原来是pre标签内文本的空格行导致的.将代码改成如下:

   <footer>
         <div class="navbar-fixed-bottom">
             <pre class="text-center" style="margin-bottom: 0px;">
                   住着抠门的老翁
              email : [e-mail]</pre>
         </div>
     </footer>
     </body>

浏览器查看网页:

解决问题.