inline-block的縫隙
元素加inline-block之后默認(rèn)右邊是有縫隙的卖丸，如果在子元素設(shè)置font-size過小可能會出現(xiàn)上邊距產(chǎn)生縫隙糠悯，而同樣的字體大小設(shè)置在父元素上不會產(chǎn)生上下縫隙。
見下圖：
font-size在子元素上：
02.png
font-size在父元素上：
01.png
解決右邊所產(chǎn)生的縫隙
方法1：標(biāo)簽頭尾無空格
缺點妻往，標(biāo)簽可讀性很差
03.png
方法2：標(biāo)簽頭尾無空格
怪異寫法
04.png
方法3：負(fù)margin
05.png
06.png
方法4：float浮動
為了得到我們想要的效果互艾，并不是只能用inline-block,我們來看一下float的效果
07.png
08.png
方法5：父容器font-size為0
總結(jié)：父容器的font-size為0是最簡單方法。父容器設(shè)置font-size為0后讯泣，我們可以隨意設(shè)置父元素上的margin,子元素的font-size,padding等纫普，都不會產(chǎn)生縫隙以及溢出。沒有副作用好渠，代碼簡潔昨稼。
09.png
inline-block支持ie8以上，如果需要兼容ie6.7可以加上一條*display: inline
display: inline-block; *display: inline
