font-size:0去掉inline-block元素間的空白字元
阿新 • • 發佈：2018-11-16
inline-block元素如果有回車換行，在瀏覽器顯示時，元素間會有間隙。
間隙可能導致換行顯示，與預期樣式不符。此外，jQuery追加元素時會把元素間的空白字元全部刪除，有時會出現元素的偏移。
通過設定font-size:0;實現間隙的去除。
<!DOCTYPE html> <head> <meta charset="utf-8"> <style> html,body{margin:0;padding:0;} .container{width:1024px;height:200px;margin:0 auto;font-size:0;} .container>div{display:inline-block;} .left{width:80%;height:100%;background-color:#ff0;} .right{width:20%;height:100%;background-color:#00f;} </style> </head> <body> <div class="container"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
