去除inline-block元素之间间隙和换行产生的行于行间隙的最佳方法

Posted 2020-10-02

方法：给inline-block元素的容器设置font-size: 0;inline-block的字体大小再另行设置即可。

• css代码

   1 .inline-block-box{
   2   font-size: 0;
   3   border: 1px solid blue;
   4   box-sizing: border-box;
   5 }
   6 .inline-block{
   7   display: inline-block;
   8   width: 300px;
   9   height: 100px;
  10   line-height: 100px;
  11   text-align: center;
  12   font-size: 20px;
  13   border: 1px solid red;
  14   box-sizing: border-box;
  15 }

• html代码

  1 <div class="inline-block-box">
  2   <div class="inline-block">inline-block</div>
  3   <div class="inline-block">inline-block</div>
  4   <div class="inline-block">inline-block</div>
  5   <div class="inline-block">inline-block</div>
  6 </div>