首页 > 代码库 > 去除inline-block元素之间间隙和换行产生的行于行间隙的最佳方法

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

方法:给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>

     

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