1. 程式人生 > >用em包圖片記

用em包圖片記

開始 如果 eat mage ont 空格 repeat image 多個

技術分享

像這種很常見的字體旁邊帶圖標的,很多都是用em的background去體現。

<li><em class="wx"></em><a href="">微信登陸</a></li>

.nav-top .wx{background: url(images/wx.png) no-repeat;padding: 1px 11px;}

剛開始沒設padding,圖標死活不出來。據yuge的說法,em是空的,padding為它裏面設置了間距,所以有空間顯示圖片。

而且如果把em放到a裏面,就算設了padding圖標還是不顯示,要把a設為a{display: inline-block;},

圖標才能顯示。block會獨占一行,能設寬高,inline是多個元素在一行,設寬高無效,inline-block就是能多個div在一行,而且inline-block水平呈現的元素間,換行符或空格分隔的情況下都會使兩個塊間有間距。

技術分享技術分享

用em包圖片記