css pre标签

浏览器:firfox49.0.2

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

相关的代码:

 <footer>
        <div class="navbar-fixed-bottom">
            <pre class="text-center" style="margin-bottom: 0px;">
                  住着抠门的老翁
             email : 422615924@qq.com
            </pre>
        </div>
    </footer>

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

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

  <footer>
        <div class="navbar-fixed-bottom">
            <pre class="text-center" style="margin-bottom: 0px;">
                  住着抠门的老翁
             email : 422615924@qq.com</pre>
        </div>
    </footer>
    </body>

浏览器查看网页:

解决问题.