display:inline-block的間隙問題和解決辦法
阿新 • • 發佈：2018-11-02
1、display:inline-block在水平方向的間隙；
程式碼如下：
<style type="text/css"> * { margin: 0; padding: 0; } .test { width: 600px; border: 1px blue solid; } .test div { width: 100px; height: 100px; display: inline-block; background: blue; } </style> </head> <body> <div class="test"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body>
效果如下：
四個div之間有小間距，解決辦法：讓水平間隙消失就是在父級上加font-size:0;讓垂直間隙消失，就在子元素上加vertical-align:bottom;就不貼程式碼了， 如果子標籤內加上任意文字，則display:inline-block元素不會生成垂直方向有空白！ 下面是解決好的效果：
