Element ui 佈局容器“el-main”的一個問題解決

element ui提供了一個方便的Container 佈局容器

<el-container>：外層容器。當子元素中包含 <el-header> 或 <el-footer> 時，全部子元素會垂直上下排列，否則會水平左右排列。

<el-header>：頂欄容器。

<el-aside>：側邊欄容器。

<el-main>：主要區域容器。

<el-footer>：底欄容器

再將代碼粘過來之後，在<el-main>中填入文字時發生了詭異的一幕：

代碼是這樣的：

<div class="info">
      <span>aaa</span>
</div>
<hr align=center width=500px color=#987cb9 SIZE=1>

.info{
        border:2px solid #F00;
        width: 700px;
        padding: 0;
        margin: 0;
        height: 30px;
    }

確定了沒有任何邊距，用f12查看：

aaa上面出現了幽靈般的邊距......

找同學複製我的代碼到純html頁面中，就不會發生這種問題，最後發現是<el-main>中的問題

官方代碼：

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

就是這行：line-height導致了那片多出來的寂寞.........