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>

瀏覽器查看網頁:

解決問題.